CSSTransition with in set to false doesn't apply any classes

[timothympace]

What is the current behavior?

When using CSSTransition with in set to false, I don't see any class names get applied to the child element.

What is the expected behavior?
I expect there to be some class applied by default.

My use case is along the lines of a slideshow where there is one slide showing at a time, but for purposes of SEO, each slide should always be rendered in the DOM. Below is a Sandbox illustrating the basic idea. In the sandbox, you can see that no class names are applied by default, and once you do a full rotation through the slides, everything is good.

(also, ignore the fact that there's no animations/transitions, just illustrating the absense of default classnames)

Could you provide a CodeSandbox demo reproducing the bug?

https://codesandbox.io/s/trusting-dan-clrid

If there's another way to be doing this, let me know. I might be misusing CSSTransition in this context.

[Ryuurock]

+1，I guess if unmountOnExit is false, the element should be display: none

[silvenon]

Well, yes, it wouldn't make much sense for exit classes to be being applied on mount, because the component has to enter first. You should define initial styles separately, which in your case is display: none.

But it does make me wonder whether a class name called something like initial should be a part of the API. 🤔

[okybr]

i think there's not much of an advantages of an additional state-class called initial. additionally, it'd be easier to drop the react-transition-group package into a react-project when you don't have to rename your existing class .foo into .foo.initial.

in any case, it'd be helpful if there was some documentation on this.

[silvenon]

Actually, this behavior isn't consistent with the status passed as a render prop, which starts as exited if the transition component mounts with in={false} (see #366). We should eventually resolve this 😕 I'll avoid documenting this for now.

[timothympace]

Okay, that makes sense not to apply exit classes on mount... but if I add display: none to my initial styles, I have the opposite problem. In that case, all my elements will be set to display: none because enterDone is not applied by default either for CSSTransition elements with in={true}. But, it looks like I can use appear to make it hit the enter transition by default, which seems to take care of the job.

[timothympace]

One more thing to add though... If you use the approach above where everything is hidden by default and you use appear to force the enter transition, then whatever is set to in={true} won't get the enter class name during a server render.

There's got to be an easier way to apply a classname to something set to in={true} by default, or conversely, something set to in={false} by default.

[silvenon]

appear is for causing a transition on mount if in={true}, if you just want that element that mounts with in={true} to have a different initial style, you can apply the class yourself based on the in prop. Your own className will get merged with the ones added by CSSTransition.

Let me know if I understood your use case correctly.

[timothympace]

Yeah, after some head banging, I figured out I just need to keep the initial classes completely separate. Ended up working just fine.

[silvenon]

Yay! Btw, I documented the behavior that was initially confusing you. http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames

I'll raise a separate issue to possibly change this behavior in the next major release.

[richardscarrott]

Wow, yes I was having a nightmare trying to figure how to handle the initial state when not using mountOnEnter / unmountOnExit -- I've found it easiest to first apply your own in / !in classes then augment that with the animation classes afterwards.