search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.14k stars 650 forks source link

Enter transition not working as expected in IE, in some cases #22

Open cjulian-360 opened 7 years ago

cjulian-360 commented 7 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior? In IE (10, 11, Edge) the CSS transition starts very close to the intended end state. If you're not looking closely it's like the transition is not happening at all. In the example linked to below one of the divs should slide in from the right but does not.

The issue occurs with some transition properties but not others. For example, I can't reproduce when transitioning on 'right' but can reproduce when transitioning on 'opacity' or 'transform'. Also, opacity and transform appear to work when animating an empty div, but not one with any content.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/). http://codepen.io/cjulian/pen/xqPMaa

The toggle button rendered in the pen above will trigger a slide-in animation. Notice that only one div slides in.

What is the expected behavior? In the above pen both divs should slide in from the right. Only one does.

Which versions, and which browser / OS are affected by this issue? Affected browsers include IE 10, 11 and Edge. I was able to reproduce the issue with react-transition-group version 1.1.1. Was also able to reproduce with react-addons-css-transition-group 15.4.2 and 15.0.1.

Did this work in previous versions? The transition works as expected in react-addons-css-transition-group 0.14.8

jquense commented 7 years ago

Sorry havent had a chance to pull this up in IE yet

vanwagonet commented 7 years ago

I am still seeing a similar problem in v2.2.0. IE11 seems to be transitioning elements out correctly, but there is no animation for the child coming in.

Jessidhia commented 7 years ago

Is perhaps the trick of accessing the scrollTop getter to trigger a reflow before adding the active class not always working in IE?

Perhaps it optimizes the reflow out if none of the properties affects the css box’s position/layout.

vanwagonet commented 7 years ago

Locally I tried replacing it with clientHeight, but that didn't seem to be any different.

reyesreg commented 7 years ago

Mine messes up occassionally. Sometimes it'll work, sometimes.... occasionally

AndyOGo commented 7 years ago

same issue here, IE does not perform enter animations

naimkhalifa commented 6 years ago

Same for me :/

multivoltage commented 6 years ago

Sane for me

iLavs commented 5 years ago

Any news about this bug?