1.0.2 • Published 7 years ago
weex-animation v1.0.2
weex-animation
demo: http://www.hacke2.cn/weex-animation/
like animation.css for weex.
Use weex playground scan:
getting start
npm install weex-animation --save
use case
import animation from 'weex-animation';
animation.fadeIn(el);
you should add exclude 'weex-animation' to vue/js loader, because it should build in your project. like this:
{
test: /\.vue(\?[^?]+)?$/,
loaders: ['weex-loader'],
exclude: function(modulePath) {
return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
}
},
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: function(modulePath) {
return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
}
}
animation function
- bounce
- flash
- pulse
- rubberBand
- shake
- headShake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- jackInTheBox
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
npm scripts
# build the two js bundles and watch file changes
npm run dev