From a18c7549dff1e29e2728857d18428775661e7571 Mon Sep 17 00:00:00 2001 From: Paul Harper Date: Wed, 18 Feb 2015 17:26:54 -0800 Subject: [PATCH] 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. --- docs/docs/10.1-animation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/10.1-animation.md b/docs/docs/10.1-animation.md index c3505235be..eaaa0b81d6 100644 --- a/docs/docs/10.1-animation.md +++ b/docs/docs/10.1-animation.md @@ -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; } ```