css-transition ui component for preact or react
npm install preact-animateanimate preact or react element easily
* support ie8,ie8+,chrome,firefox,safari
npm i preact-animate
jsx
import Animate from 'preact-animate';preact.render(
1
2
, mountNode);
`$3
set webpack alias` javascript
module.exports = {
resolve: {
alias: {
"preact-animate": "preact-animate/dist/react-animate.js"
}
}
}
`or rollup alias
` javascript
const alias = require('rollup-plugin-alias')
module.exports = {
plugins: [new alias({
'preact-animate': 'preact-animate/dist/react-animate.js'
})]
}
`API
$3
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
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.
$3
with appear, enter and leave as keys. for example:
`js
{
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