Skip to content

Commit

Permalink
fix doc & example transition opacity from .99 to 1
Browse files Browse the repository at this point in the history
The initial thought was that an opacity animation from 0.01 to 1 causes trouble on some browser. But after testing on opera 12.15, ff 23, ie 10, chrome 30, desktop/mobile safari 7 and chrome android I confirm this works.
  • Loading branch information
chenglou authored and zpao committed Nov 14, 2013
1 parent c1c7a60 commit fb1a072
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 3 deletions.
4 changes: 2 additions & 2 deletions docs/docs/09-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ You can use these classes to trigger a CSS animation or transition. For example,
}

.example-enter.example-enter-active {
opacity: 0.99;
opacity: 1;
}
```

You'll notice that when you try to remove an item `ReactTransitionGroup` keeps it in the DOM. If you're using an unminified build of React you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:

```css
.example-leave {
opacity: 0.99;
opacity: 1;
transition: opacity .5s ease-in;
}

Expand Down
2 changes: 1 addition & 1 deletion examples/transitions/transition.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
.example-enter.example-enter-active,
.example-leave {
margin-left: 0;
opacity: 0.99;
opacity: 1;
}

.animateExample {
Expand Down

0 comments on commit fb1a072

Please sign in to comment.