done classname for appearing

[koba04]

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

bug?

What is the current behavior?

    <CSSTransition in appear timeout={timeout} classNames="fade">
        {props.children}
    </CSSTransition>

The above case, CSSTransition applies the following classNames in the order.

• .fade-appear
• .fade-appear.fade-appear-active
• .fade-enter-done

Is adding .fade-enter-done classname to a component an expected behavior?
I think it would be better the classname will be .fade-appear-done instead of .fade-enter-done.

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://codesandbox.io/s/7w59nmnn1x

What is the expected behavior?

A component is added .fade-appear-done instead of .fade-enter-done.

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

[silvenon]

I'm not entirely sure what would be appropriate. Maybe the best solution would be to add both classes. @jquense?

[silvenon]

I'll change this to fade-appear-done. That's going to be a breaking change for anyone who relied on this, but that's a weird behavior to rely on. 😅

[taion]

This is sort of weird, though – would the "appear done" class ever be different from "enter done"?

I wonder if it would have been better for "appear" to be an extra class, so we'd have ended up with .appearing.enter-active or whatever.

[silvenon]

There are use cases where you'd want initial appearance to look differently. I think your idea is great, then people who want to apply different styles to appearing vs. entering could do something like :not(.appearing).enter-active, that way they won't have to override anything.

[silvenon]

Maybe appear instead of appearing, that way it's more generic and clear that it acts as a modifier to enter-* and exit-* classes.

[koba04]

This issue is for the inconsistent naming.

.appear.enter-active is good for me.
In the case, I think we have to apply the naming convention to other classes like this.

.appear.fade-enter
.appear.fade-enter.fade-enter-active
.appear.fade-enter-done

It seems to be huge breaking changes though.

[silvenon]

Yeah. Another, less breaking solution would be to add fade-appear-done instead of fade-enter-done to the current behavior.

[jquense]

🎉 This issue has been resolved in version 2.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀