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