Small micro-channel program - Animated animate.css

Micro-channel has its own development designed to make animation API, a simple animation point (rotation, translation, scaling) comes with it, today I use a CSS3 animation library,

animate.css is a use of CSS3 animation animated CSS effects of the collection, which presupposes a variety of popular animated and very simple to use.

On a little touch of small programs can be used, just perfect! ! !

Renderings .gif

Instructions:

1. Place the animate.wxssfile into the project, the app.wxssintroduction of the

@import "文件路径/animate.wxss";

2. The need to add animation label set as follows

<view>
<text class='animated bounce'>微信小程序</text>
</view>

If you need to repeat the animation, simply by addinginfinite

<view>
<text class='animated bounce infinite'>微信小程序</text>
</view>

Explained : animatedmust write in order to truly use, bounceis animate.wxssone of the animation, you can select the movie you want, of course, you can also modify the animation parameters to meet the needs of the project! ! !

3. can be *.jschanged dynamically in animation

//.wxml
<view class='containView'>
<text class='{{animationType}}'>微信小程序</text>
</view>

//.js
/**
   * 页面的初始数据
   */
  data: {
    animationType:"animated bounce" //初始的动画效果
  }

  //按钮点击
  clickBtn:function(){
    // "animated bounce infinite"
      this.setData({
        animationType: "animated " + 动画名称  //别忘了加空格
      })
}
这样就实现了动画改变，是不是很简单呀！！！

4.demo Download:

https://github.com/aiyakuaile/---animate.css-

5. References

animate.css official website: https://daneden.me/animate/