animate preact or react element easily
npm i preact-animate
import Animate from 'preact-animate';
preact.render(
<Animate animation={{ ... }}>
<p key="1">1</p>
<p key="2">2</p>
</Animate>
, mountNode);
set webpack alias
module.exports = {
resolve: {
alias: {
"preact-animate": "preact-animate/dist/react-animate.js"
}
}
}
or rollup alias
const alias = require('rollup-plugin-alias')
module.exports = {
plugins: [new alias({
'preact-animate': 'preact-animate/dist/react-animate.js'
})]
}
name | type | default | description |
---|---|---|---|
component | React.Element/String | 'span' | wrap dom node or component for children. set to '' if you do not wrap for only one child |
componentProps | Object | {} | extra props that will be passed to component |
showProp | String | using prop for show and hide. [demo](http://react-component.github.io/animate/examples/hide-todo.html) | |
exclusive | Boolean | whether allow only one set of animations(enter and leave) at the same time. | |
transitionName | String|Object | specify corresponding css, see ReactCSSTransitionGroup | |
transitionAppear | Boolean | false | whether support transition appear anim |
transitionEnter | Boolean | true | whether support transition enter anim |
transitionLeave | Boolean | true | whether support transition leave anim |
onBeforeEnter | function(child: AnimateChild) => void; | null | animation before Enter life |
onEnter | function(child: AnimateChild, done: () => void) => void; | null | animation Enter life must called `done` |
onAfterEnter | function(child: AnimateChild) => void; | null | animation after Enter life |
onBeforeLeave | function(child: AnimateChild) => void; | null | animation before Leave life |
onLeave | function(child: AnimateChild, done: () => void) => void; | null | animation Leave life must called `done` |
onAfterLeave | function(child: AnimateChild) => void; | null | animation after Leave life |
onBeforeAppear | function(child: AnimateChild) => void; | null | animation before appear life |
onAppear | function(child: AnimateChild, done: () => void) => void; | null | animation Appear life must called `done` |
onAfterAppear | function(child: AnimateChild) => void; | null | animation after Appear life |
onBeforeDisappear | function(child: AnimateChild) => void; | null | animation before Disappear life |
onDisappear | function(child: AnimateChild, done: () => void) => void; | null | animation Disappear life must called `done` |
onAfterDisappear | function(child: AnimateChild) => void; | null | animation after Disappear life |
onAfterCancelled | function(child: AnimateChild, status: number) => any | null | animation after cancelled life |
animation | Object | {} | to animate with js. see animation format below. |
with appear, enter and leave as keys. for example:
{
appear: function(node, done){
node.style.display='none';
$(node).slideUp(done);
return {
stop:function(){
// jq will call done on finish
$(node).stop(true);
}
};
},
enter: function(){
this.appear.apply(this,arguments);
},
leave: function(node, done){
node.style.display='';
$(node).slideDown(done);
return {
stop:function(){
// jq will call done on finish
$(node).stop(true);
}
};
}
}
preact-animate is released under the MIT license.
fork by rc-animate