Flexible class names with CSSTransitionGroup

[akiran]

As of now, classes added to animated element is fixed based on transitionName.
Ex: if transitionName="example",
example-enter, example-enter-active, example-leave, example-leave-active classes are added.

Can we provide flexibility in naming classes ?
Ex: fadeIn for enter animation and fadeOut for leave animation
This will help us in using existing css animation libraries with react animation addon.

I propose the following API

transitionName="example" 

adds example-enter, example-enter-active, example-leave, example-leave-active classes.

transitionName={enter: "fadein", leave: "fadeout"}

adds fadein, fadein-active, fadeout, fadeout-active classes

transitionName  =  { 
           enter: "fadein",
           enterActive: "fadeinActive",
           leave: "fadeout",
           leaveActive: "fadeoutActive"
}

adds fadein, fadeinActive, fadeout, fadeoutActive classes

[nhagen]

This would be really useful for third party transition libraries (for example https://github.com/daneden/animate.css)

[edword]

+1

[bloodyowl]

👍 using BEM, I usually end up with <CSSTransitionGroup transitionName="org-Block-element-"> to get org-Block-element--enter classes, which isn't very elegant.

[mosch]

👍 would love to see this.
I use the CSSTransitionGroup for animating the transition between screens in an app.
Every screen has it's custom enter and leave animation. So I would like to set the enter animation
for the new screen, and the leave animation for the disappearing screen.

[laupow]

An little more control over animation classes would be a nice addition to React.

In addition to making animation libraries more accessible, this proposal makes it easier to reuse existing animation css that doesn't follow the -enter/-leave/-active naming convention.

[slorber]

@nhagen Actually I tried to use Animate.CSS with it, while answering this SO question:
http://stackoverflow.com/questions/30904462/how-to-add-reactjs-animation-library-and-animate-css-to-animate

Even with latest commit of @alexpien it does not work, because animate.css requires multiple classnames, like animated bounce.

Thanks to @zpao's JsFiddle of latest build (currently 0.14.0-beta3), I was able to make a sandbox here:

http://jsfiddle.net/ghmpo42k/6/

<ReactCSSTransitionGroup transitionName={{enter: "animated bounce", enterActive: "animated bounce", leave: "animated tada",leaveActive: "animated tada"}}>
                    {todos}
</ReactCSSTransitionGroup>

This does not work, because:

Uncaught Error: Invariant Violation: CSSCore.addClass takes only a single class name. "animated bounce" contains multiple classes. 

I think this should be supported as well because currently it is not flexible enough to support all CSS animation frameworks.

Also, when using only enter: "enter" / leave: "leave" parameters, I think we should keep it simple and only use "enter" and "leave", without the -active suffix.

What I mean is that if we use:

 <ReactCSSTransitionGroup transitionName={{enter: "animated bounce", leave: "animated tada"}>

(remember currently it does not work, so I give "pseudo outputs")

We should not end up with something like:

enter: "animated bounce"
enterActive: "animated-active bounce-active"
leave: "animated tada"
leaveActive: "animated-tada tada-active"

but rather

enter: "animated bounce"
enterActive: "animated bounce"
leave: "animated tada"
leaveActive: "animated tada"

[zdenekkostal]

We tried (with @schovi ) to add support for animating with multiple classes without breaking current API, but we were not sure how to approach the case when only enter is provided.

When you pass more than just one CSS class to enter without providing enterActive, there is not straightforward behaviour for generating enterActive class.

There are few options what to do:

1. Leave behaviour as it is, which generates class like animated bounce-active which is what we don't want to do.
2. Do not append anything to active class and leave it to user instead. (Which is not backwards-compatible.)
3. Detect if there are more than one class in provided enter animation type, and append -active if there is just one class or leave it empty. which is solution we choose

We're not sure with this solution and we would like to open discussion about it.
Preview of third version: zdenekkostal@a163043

[jpaulomotta]

Allowing multiple class names like "animate bounce" would be perfect.

[ryanblakeley]

Allowing multiple class names is also important for css-modules' (demo) composes API.