Subscribe on changes!

Transition component does not work with "*-leave-from"

avatar
Nov 12th 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/transition-leave-bug-evexs

Steps to reproduce

https://codesandbox.io/s/transition-leave-bug-evexs

What is expected?

When trigger leave, the font color should translate from red to default.

What is actually happening?

  1. Properties in class *-leave-from not work.
  2. The class *-leave-from affects the normal operation of transition component.

The reason is related to the process of adding/removing css-class, i would like to fix it.

avatar
Nov 12th 2020

It looks like adding a property to be removed right away (in this case the color: red being only in leave-from) breaks the transition. To workaround it, you can add a color property to .test-leave-to

avatar
Nov 12th 2020

An alternative workaround is to put transition: none; in .test-leave-from.

avatar
Nov 12th 2020

Thanks in the first place.

In fact, i create this example on purpose. Because i find current logic does not deal with this scence when im dealing with another issue.