React-transition-group: Using `transform: scale`, the transition out does not appear to be the opposite of in

[ror-y]

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

What is the current behavior?
Given a transition that uses transform: scale on its in and out transition, the transition out looks different to the one in, giving an inconsistent impression. Specifically, the transition out moves the 'bubble' across. It's very easy to see in the code example.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox or similar (Template: https://codesandbox.io/s/lvnpplww9).
https://codesandbox.io/s/l7n959lk39
You can see it especially clearly when the timeout is set to longer. Interestingly, if you set a very large number for the timeout in the JS, then click the button, it looks correct.

What is the expected behavior?
The transition out should be the same as the one in.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Chrome 67 MacOS. Unknown if works in previous versions

[silvenon]

This is CSS transitions territory, not a bug with this library. Your enter and leave transitions are asymmetrical because your styles are asymmetrical. These changes should fix your problem:

 .balloonTransition-enter {
   background-color: forestgreen;
   top: 140px;
   transform: scale(0.1);
   transform-origin: left;
 }

 .balloonTransition-enter-active {
   background-color: mediumspringgreen;
   top: 0px;
   transform: scale(1);
   transition: all 300ms;
 }

 .balloonTransition-exit {
   background-color: mediumspringgreen;
   top: 0px;
   transform: scale(1);
+  transform-origin: left;
-  transition: all 300ms;
 }

 .balloonTransition-exit-active {
   background-color: forestgreen;
   top: 140px;
   transform: scale(0.1);
-  transform-origin: left;
+  transition: all 300ms;
 }

[silvenon]

Also, beware of transition: all, because in this case it also animated transform-origin, which is another reason why you were getting this effect.

[ror-y]

Thanks

[ror-y]

@silvenon Coming back to this, I'm actually quite confused at why your changes make the affect they do. Why does transition behave differently when placed on exit to when placed on exit-active? Those classes both get added at once, don't they?

[jquense]

@alanbuchanan they do not get added at the same time, its exit and then on the next tick exit-active, you get transitions triggered because they are added at different times.

[ror-y]

Thanks

[silvenon]

Otherwise -active classes would have no purpose. I'll make that more clear in the docs.

[ror-y]

Is the next-tick behaviour you described the same thing as the ‘reflow hack’?

[silvenon]

Yes.