How to make transition animation? about preact HOT 23 CLOSED

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?

from preact.

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

from preact.

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.

from preact.

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.

from preact.

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

from preact.

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

from preact.

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

from preact.

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.

from preact.

@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!)

from preact.

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.

from preact.

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... 😷

from preact.

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

from preact.

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

from preact.

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 ?

from preact.

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!

from preact.

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

from preact.

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.

from preact.

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

from preact.

@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.

from preact.

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.

from preact.

@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...

from preact.

@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.)

from preact.

Please don't forget to add this line inside your tsconfig.json file in case you have this error: Element cannot be used as a JSX component. preact

"include": ["src/**/*.tsx", "src/**/*.ts"]

from preact.