React-transition-group: IE enter css transition does not finish

[AndyOGo]

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

What is the current behavior?
The CSS transition does not finish 100%, instead it ends shortly before the end. If I force a repaint everything is fine.

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/m4mb9Lg3/4/).
https://www.axa.ch/de/privatkunden/kampagnen/vorsorgetool.html

What is the expected behavior?
The transition should finish completely.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
IE 11

Workaround
I can make it work if I make sure that my timeout is bigger than the CSS transition delay defined within CSS. Though this is not ideal.

[AndyOGo]

I made further tests.
Now I can confirm, that this bug is noticeable in all versions, the former ReactCSSTransitionGroup, V1-stable of react-transition-group and version 2 of react-transition-group only in Internet Explorer, all other Browsers I tested do finish their transitions, except IE.

[AndyOGo]

Two solutions I found so far are:

• longer timeout, in my test case transition-duration: 330ms, but timeout: 400 works (350 was too low) - not a very predictable solution
• forcing a repaint through JS
• maybe IE works better with ontransitionend events #190

[piotr-cz]

Is it present in IE11?

[AndyOGo]

@piotr-cz
Yes IE 11 is affected - as mentioned in my original issue regarding affected browser/version.

[multivoltage]

Some news?

[multivoltage]

With debugger; it seems to work. Very strange

[bendenoz]

+1

[ArtieReus]

+1
Using timeout 500ms fix it in ie 11.

[keesvanlierop]

+1

[AndyOGo]

Yep this is the hack, but it will also mess up proper timing of consecutive animations 🤔

[multivoltage]

I solve to set display block then display none then again display block (in other case it should be absolute none absolute probably). This trick on the element fix in my case

[AndyOGo]

@multivoltage
Thats true triggering repaint or relayout can also fix it.
But all of those are hacks.
The proper way is using ontransitionend to detect the real end off the animation.

[multivoltage]

Yes, but we had some problems in firefox is and edge

[AndyOGo]

It can be done, I did it myself already in a cross browser fashion.

1. First step is to detect potential matching browser prefix (note opera is very special they switched from camelcase to lowercase).
2. Then bind ontransitionend (or the prefixed version)
3. Last the main trick is, that this event triggers for each CSS property separately, so
   
   
   
   • Easiest case you have single prop change - which means all done
   
   
   • Else may need to check event.propertyName
   
   

That's it, and all works just fine.
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

I implemented it here for usage in custom elements:
https://axa-ch.github.io/patterns-library/

[satuzcuoglu]

+1

[clement-fifty]

What does the timeout refer to? Css? From setTimeout() javascript method ?

[kamdz]

I solve it in this way:

onEntered={(node) => {
  // force reflow in browser
  siteHeader.style.display = 'none';
  siteHeader.offsetHeight;
  siteHeader.style.display = 'block';
}}

It works in IE11 and Edge. You can conditionally add it only in IE, not all browsers.