【Weex笔记】-- Animate.css的使用

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用。

一，安装辅助依赖

 npm install animate.css
 npm install node-sass;
 npm install sass-loader

二，导入

Github源码 ：https://github.com/daneden/animate.css

1，将获取的animate.css文件放入项目任意目录中，例如lib目录。

2，样式引入

<style lang="scss" scoped>
  @import "../../../lib/animate.css";

  .start_music_view{
      width:77px;height: 77px;
      position: absolute;right: 50px;
      top: 40px;
      animation-duration: 2s;
  }
</style>

三， html

<image :src="UIInfo.start_music" class="start_music_view animated rotateIn infinite" ref='misref'  id="misref" @click="operateMusic"></image>

介绍：

• start_music_view ：原样式
• animated rotateIn infinite：动画样式
• rotateIn ：旋转
• infinite：重复

四， 修改动画某个属性

<style lang="scss" scoped>
  @import "../../../lib/animate.css";

  .start_music_view{
      width:77px;height: 77px;
      position: absolute;right: 50px;
      top: 40px;
      animation-duration: 2s;
  }
</style>

如上代码，在原样式中添加动画属性，即可覆盖动画库中的属性。

五， js动态添加和删除

添加动画：

var misref = document.getElementById('misref');
misref.classList.add('animated');
misref.classList.add('flash');
misref.classList.add('infinite');

删除动画：

var misref = document.getElementById('misref');
misref.classList.remove('animated');
misref.classList.remove('flash');
misref.classList.remove('infinite');

相关借鉴：

https://www.cnblogs.com/xiaohuochai/p/7372665.html

在线演示：https://daneden.github.io/animate.css/

git源码：https://github.com/daneden/animate.css