maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modify sample CSS so that it works in Safari 

When animating the max-height property in Safari, entering the leave state would trigger an animation to `max-height: 0`. Then when the active state kicked in, it would jump and didn't really look right. Moving the `transition` css property to the active version fixed the issue for me and worked on Safari, Chrome and Firefox. Unfortunately I'm not in a position to test in IE at the moment, but I'll do that at my first convenience tomorrow.
This commit is contained in:
Paul Harper 2015-02-18 17:26:54 -08:00
parent 6c29eba035
commit a18c7549df
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/10.1-animation.md
View File

@ -63,11 +63,11 @@ You can use these classes to trigger a CSS animation or transition. For example,
```css
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity .5s ease-in;
}
```
@ -76,11 +76,11 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
```css
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity .5s ease-in;
}
```