React: 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]

:+1: 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]

:+1: 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: https://github.com/zdenekkostal/react/commit/a1630436043f73b4eeaa24b5170e167b386482f8

[jpaulomotta]

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

[rojobuffalo]

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

[BerkeleyTrue]

:+1:

[ron23]

So we can't use css-modules with composition without that feature fixed?
@rblakeley have you found a way to do that?
I'm getting: "CSSCore.addClass takes only a single class name"

[rojobuffalo]

@ron23 you can use css-modules with composition elsewhere with React, just not with CSSTransitionGroup. When css-modules handles composition, it creates multiple classnames which separate shared and overridden styles. CSSTransitionGroup doesn't yet support multiple classnames.

[jokeyrhyme]

I'm a little confused. The documentation makes it seem as though it's already possible to achieve this:

• https://facebook.github.io/react/docs/animation.html#custom-classes

But as of 0.14.8, I still get the following errors if I try to pass the specified { enter, enterActive, etc } object as the "transitionName" prop:

invariant.js:39 Uncaught Invariant Violation: CSSCore.addClass takes only a single class name. "[object Object]-enter" contains multiple classes.

[gaearon]

Can you please provide a JSFiddle reproducing the issue?

[jokeyrhyme]

@gaearon nevermind, I think I got it working here: http://codepen.io/jokeyrhyme/pen/xVLXLK
My other project must be doing something weird.

[jokeyrhyme]

@gaearon figured it out. I was using CSS modules, but the classes were empty. I found that empty classes get optimised away, so the className string I was passing was undefined. My old .class {} placeholder isn't good enough here. :)

[cvle]

What is the status of supporting multiple css classes? Is this a feature that is intended to be implemented? CSS based styling solutions is getting more and more popular see https://github.com/cssinjs/jss and https://github.com/callemall/material-ui is planning to switch over css classnames. I usually use one base css class and a user provided class for customizations. I like ReactCSSTransitionGroups but currently it is unusable for me.

[cvle]

Are there any blocking issues for implementing multiple css classname support?

[Nickman87]

I'd like to add a comment here to say that the transitionName, using an object, is very easily broken by not providing one of the "main" names (enter, leave, appear).
I don't want to add any classes when the item is appearing, so I did not provide a classname for that label and I also get the

Uncaught Invariant Violation: CSSCore.addClass takes only a single class name. "[object Object]-appear" contains multiple classes.

I should think that these classnames could be made optional by just checking if transitionName is a string or an object here: https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L66

[epegzz]

thx @Nickman87, at least this helped me finding the cause for that misleading error message :)

[Vishal0203]

I was able to use animate.css with react.
Look at my answer at stack overflow

[gaearon]

I’m going to close since we don’t plan any more changes to TransitionGroup in React repo. Instead, it now is maintained by the community, and you can file an issue in the new repository if this is still affecting you. Thanks!