Transitions/Animations

[trueadm]

My idea of how we might implement some transition states, in this case when a DOM node enter and leaves the document, we want to apply some form of transition along with a delay before the DOM node completes its enter or leave.

<div className="box" transition={{ name: 'box-animate', enter: 500, leave: 250 }} />

This would work very much like React's ReactCSSTransitionGroup (https://facebook.github.io/react/docs/animation.html).

So in the case above, when the div DOM node gets removed/added from/to the document, Inferno will apply some additional classNames (prefixed with box-animate as per above) to the DOM node. These classes would then allow the user to implicitly set different styles for the duration of the delay (in the example above, this would be 500ms or 250ms).

What do people think about this idea?

[tejacques]

Is there an advantage to doing this as a core feature rather than a HOC like ReactCSSTransitiomGroup?

It appeals to me to have it as an outside lib because it means there is a tremendous amount of flexibility and control.

[trueadm]

@tejacques of course, but given how limited this API is (intentionally) it makes sense for it be on inferno-dom for performance reasons and simplicity reasons. We already have hooks which can give the same features that ReactCSSTransitiomGroup offers for callbacks.

Inspiration for this comes from Snabbdom and some of the comments from @garth in the Cerebral community. Maybe @garth can elaborate more on how this inline usage has helped him and his project?

[tejacques]

Performance is a good reason, if there are performance implications of having it as an HOC then it makes sense. Another reason to have it as an HOC library though would be to provide existing React users an easier transition path to Inferno, but that is a secondary or tertiary concern, we certainly shouldn't limit Inferno because of it.

[tejacques]

Actually thinking about it more, a more feature rich HOC library could just be built on top of this (and give compatibility), so I don't really see any downsides.

I think having animation as more of a first class citizen is definitely the way to go these days, too.

[stevenvachon]

What about the transitionend event?

Or more useful, an event when all transitions have completed. I wrote this a while back: https://github.com/stevenvachon/jquery.transitionsend for which I intend to rewrite as a vanilla lib

[joshburgess]

If performance is a big concern, it might be worth looking at Velocity.js, GSAP, etc. instead of pure CSS. Eventually, you'd really just want a pluggable system so userland could choose on its own.

[trueadm]

We have third-party libraries to deal with animations. We had a poll and overwhelmingly, everyone voted to not hardcode fragile animation code into core like other libraries have done, but rather let others provider offerings to better support each individual's use case.

[kurdin]

I converted 2 React animations packages to Inferno js. In case if anyone still looking for easy animations for Inferno's single or list components, try those:

https://github.com/kurdin/velocity-inferno https://github.com/kurdin/inferno-animate.css

[Havunen]

@kurdin Nice work. We could advertise them in website if you want? If you are interested creating documentation please send PR here. https://github.com/infernojs/inferno-website

[kurdin]

@Havunen thanks, I have to do some work right now but maybe later I can create Animations section (under Advanced) on inferno website and add documentation.