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.
Paul Harper committed
Feb 18, 2015 at 17:26 UTC
a18c7549dff1e29e2728857d18428775661e7571
1 file changed
+2
-2
docs/docs/10.1-animation.md
+2
-2
@@ -63,11 +63,11 @@ You can use these classes to trigger a CSS animation or transition. For example,
63
```css
64
.example-enter {
65
opacity: 0.01;
66
- transition: opacity .5s ease-in;
66
}
67
68
.example-enter.example-enter-active {
69
opacity: 1;
70
+ transition: opacity .5s ease-in;
71
}
72
```
73
@@ -76,11 +76,11 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
76
```css
77
.example-leave {
78
opacity: 1;
79
- transition: opacity .5s ease-in;
79
}
80
81
.example-leave.example-leave-active {
82
opacity: 0.01;
83
+ transition: opacity .5s ease-in;
84
}
85
```
86