【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{
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' ></image>
介绍:
- start_music_view :原样式
- animated rotateIn infinite:动画样式
- rotateIn :旋转
- infinite:重复
四, 修改动画某个属性
<style lang="scss" scoped>
@import "../../../lib/animate.css";
.start_music_view{
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