Preact: How to make transition animation?

[JonneyYan]

My English is not good, so sorry~~~ :cry:

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

[developit]

Hi! The way I've done this before is to use rc-css-transition-group:

npm install --save rc-css-transition-group

... and then alias it in Webpack:

alias: {
    'react': 'preact-compat',
    'react-dom': 'preact-compat',
    'react-addons-css-transition-group': 'rc-css-transition-group'
}

You can see the configuration in this repo:

https://github.com/developit/preact-compat-example/blob/master/webpack.config.babel.js#L15-L19

[neagle]

Is it only possible to use rc-css-transition-group with preact-compat?

[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');

[neagle]

Gotcha. It's awesome that you're working on a standalone rewrite. :)

[laurencedorman]

That's great news about the standalone, I wasn't able to solve my issue with rc-css-transition-group very cleanly because I'm locked into using browserify which can't do global aliases in the way that it's configured.

[developit]

@ld0rman Just checking - you can't use aliasify? Here's an example config: https://github.com/ubilabs/react-geosuggest/pull/103/files (I might be way off here, sorry!)

[laurencedorman]

developit awesome of you to check it out but yes I tried this set up but it doesn't work in my environment. I think it's because the files that need to be transformed by aliasify are in the node_modules folder and transforms specified in the package.json don't work inside of this.

[developit]

Ahh, right - not workable if the imports are coming from third party modules.

I wonder if there is a clean way to solve that, even with the standalone version? Authors depending on react-addons-css-transition-group are essentially depending on React internals by choice. Hopefully we don't have to convince module authors to switch to a standalone module instead of the module that only looks standalone... 😷

[ckwong90]

Can we use https://github.com/react-component/animate to animate Preact components?

[developit]

@ckwong90 I haven't had a chance to check yet, but it seems like it should work fine with React aliased as preact-compat.

[alexbardas]

I can confirm that I've managed to integrate preact, preact-compat & preact-router with the react-component/animate. There's no need for any alias when using this new animate component.

I'll share some code for anyone who gets here and is interested:

app.js

// imports section for React, Component1, ComponentX, PageTransition, Router (from preact-router)

export default () => (
  <Router>
    <PageTransition component={Component1} path='/' />
    <PageTransition component={Component2} path='/page1' />
    <PageTransition component={Component1} default />
  </Router>

page-transition.js

// imports section for React, ...
import Animate from 'rc-animate'
import style from './style'

export default (props) => (
  <Animate component='' transitionName={style} transitionAppear={true} transitionLeave={true}>
    <props.component key={props.path} />
  </Animate>
)

style.css

.appear,
.enter,
.leave {
  transition: opacity 800 ease-in-out;
}

.appear,
.enter {
 opacity: 0.01;
}

.appearActive,
.enterActive,
.leave {
  opacity: 1;
}

.leaveActive {
 opacity: 0.01;
}

It works very well with both transitions and animations. The only thing I haven't managed to do yet is to execute the leave transition before going to a new route. The rc-animate allows executing some callbacks after an animation appears, enters, leaves, etc (https://github.com/react-component/animate/blob/master/src/Animate.js#L54).

Maybe the router needs to be extended to exit a route when a props callback is called or can you think of any other better solution @developit ?

[developit]

Hmm - I just published preact-css-transition-group. I had it sitting around for months and just fixed the last remaining issue, so I released it. It's a fork of the precursor to react-component/animate, but it looks like the API is quite different. I actually like the code snippet you posted quite a bit more.

Just so I'm clear: Is the issue that <Router /> removes the child element without it being able to apply the transition? Thanks!

[alexbardas]

Thanks for releasing it!

rc-animate has more functionality than the rc-css-transition-group. As far as I can figure out from the docs, the extras would be:

• transitionAppear
• callbacks for onEnd, onEnter, onLeave, onAppear

The usage is similar, but looks more powerful while still not adding too much code complexity.

Going through the official React docs I can see that they also have transitionAppear + At the initial mount, all children of the ReactCSSTransitionGroup will appear but not enter. However, all children later added to an existing ReactCSSTransitionGroup will enter but not appear. which is good functionality to have.

Regarding the question, that's exactly the issue. It's obviously not the biggest problem, but it would be nice to have control over this. The expected behaviour would be to be able to do a leave transition and only after to have the child element removed.

LE:
Actually, there was an incompatibility between rc-animate and css-modules that tricked me. I've sent a PR there so hopefully it will be fixed soon. The <Router /> does remove the child element after the transition is applied, so this behaviour is correct.

[developit]

@alexbardas Just saw your edit, that's good to know. I'm wondering if we are good to close out this issue, since we have a few approaches that work now (pending the rc-animate issue you mentioned). Think we can?

[developit]

I think we can safely close this issue since there is now a preact-css-transition-group. We should open up issues there if there are things missing compared to the react implementation.

[ilkovulchev]

Hello @developit ,

I am re-opening this because ReactTransitionGroup and ReactCSSTransitionGroup are both deprecated in v15.5.0 and the recommendation is to use TransitionGroup and CSSTransitionGroup from 'react-transition-group' instead. What alias should be used because I tried with preact-css-transition-group but it's not working as intended?

Thank you.

[developit]

@ilkovulchev both of those libraries should work properly if you have preact-compat aliased.

[ilkovulchev]

@developit meaning this should work: react-transition-group/CSSTransitionGroup': 'preact-compat'? Because I tried and it did not seem to work. I tried - react-transition-group': 'preact-compat also but still the same.

[developit]

Just aliasing react and react-dom to preact-compat and then using the library without modification should work, I'm not seeing anything in it's implementation that would break.

[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?

[nikrowell]

@mindplay-dk curious if you've landed on a simple and solution for this? I'm also drawn to the hyperapp/picodom approach of having some sort of remove hook with a callback...

[mindplay-dk]

@nikrowell not really - I'm just making do without animations for now.

btw I updated my last post above - I had put ondestroy in a couple of places where I meant to put onremove ... (PicoDOM has three life-cycle callbacks, "create" for creation, "remove" for direct element removals, and "destroy" for indirect (child) removals and/or deferred removals via the done callback that gets passed to the "remove" handler.)