Repository navigation
done classname for appearing #327
Description
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?
Activity
silvenon commentedon May 1, 2018
I'm not entirely sure what would be appropriate. Maybe the best solution would be to add both classes. @jquense?
silvenon commentedon Jul 17, 2018
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 commentedon Jul 24, 2018
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-activeor whatever.silvenon commentedon Jul 24, 2018
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 commentedon Jul 24, 2018
Maybe
appearinstead ofappearing, that way it's more generic and clear that it acts as a modifier toenter-*andexit-*classes.koba04 commentedon Jul 25, 2018
This issue is for the inconsistent naming.
.appear.enter-activeis good for me.In the case, I think we have to apply the naming convention to other classes like this.
It seems to be huge breaking changes though.
silvenon commentedon Jul 25, 2018
Yeah. Another, less breaking solution would be to add
fade-appear-doneinstead offade-enter-doneto the current behavior.chore(release): 2.9.0 [skip ci]
jquense commentedon Apr 6, 2019
🎉 This issue has been resolved in version 2.9.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
chore(release): 2.9.0 [skip ci]
chore(release): 2.9.0 [skip ci]
chore(release): 2.9.0 [skip ci]
chore(release): 2.9.0 [skip ci]