小型マイクロチャネルプログラム - アニメーションanimate.css

マイクロチャネルは、今日の私はCSS3のアニメーションライブラリを使用して、簡単なアニメーションポイント（回転、平行移動、拡大縮小は）それが付属して、アニメーションAPIを作るために設計された独自の発展を持っています

animate.cssは、 CSS3のの使用であるアニメーションの人気アニメーションと使用することは非常に簡単で、さまざまな前提コレクション、のアニメーションCSS効果。

小さなプログラムの小さなタッチで、完璧に使用することができます！！！

レンダリング.GIF

どのように使用するには：

1. animate.wxssプロジェクトにファイルapp.wxssの導入

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

2.次のように必要がアニメーションラベルセットを追加します

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

あなたは、単に追加することにより、アニメーションを繰り返す必要がある場合infinite

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

説明：animated、本当に使用するために書かなければならないbounceですanimate.wxssアニメーションの一つ、あなたがしたい動画を選択することができ、もちろん、あなたはまた、プロジェクトのニーズを満たすために、アニメーションパラメータを変更することができます！！！

3.可能な*.jsアニメーションで動的に変更します

//.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ダウンロード：

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

5.参考文献

animate.css公式サイト：https://daneden.me/animate/