How to make transition animation?

My English is not good, so sorry~~~ 😢

In React ecosystem, I make a easy transition animation by ReactTransitionGroup.

so, by Preact, how i do it ?

I just want easy css transition animation,like enter or leave.

Thank you

preact is awesome project, keep going! 👍

[mindplay-dk]

I was hoping to find something more in the vein of Preact - something more minimal and more general that doesn’t require the react compatibility thing.

Picodom offers two simple element-level life-cycle hooks, oncreate and onremove:

https://github.com/picodom/picodom#life-cycle-attributes

oncreate is simple enough, and you can do something similar with the ref hook in Preact - but onremove is particularly interesting here, because it permits you to defer the physical removal of the DOM element to a later time.

So if you wanted animation during removal of keyed table-rows, you’d do something like this:

<tr key={ ... } onremove={ (el, done) => { el.classList.add("remove"); setTimeout(done, 1000) }}>
   ...
</tr>

If the framework is about to remove a DOM element with an onremove handler, instead of immediately removing the element, it passes a callback done to the handler, which can call it later to remove the actual element - in the mean time, the diff/patch algo ignores that element and leaves it where it is in the DOM.

I’d love to find a simpler way to do something similar in Preact, as my needs are pretty humble - essentially, I’d use animation to indicate table-rows or list-items being added/removed, purely to improve end-user’s perception of having created/destroyed something.

If you were going to hard-code a simple removal animation, without any framework at all, what would that minimally look like in Preact?

For creation, if you’re going to use a simple CSS transition, presumably you’d need a “next frame” callback of sorts - some way to defer the addition of a class until the render after the next scheduled render. Is there any way to hook into the internal rendering pipeline of Preact to make that happen?

[developit]

@neagle The issue is that react-addons-css-transition-group is actually just a proxy into React’s core. I’m working on a refactor/rewrite of rc-css-transition-group that improves it and makes it standalone. You can see how odd it is here:

https://npmcdn.com/react-addons-css-transition-group

module.exports = require('react/lib/ReactCSSTransitionGroup');