在vue中使用animate.css动画库
npm安装以及使用(4.1.0版本)
-
npm安装
npm install animate.css --save
// in main.js import animated from 'animate.css' Vue.use(animated)
-
使用cdn引入https://www.bootcdn.cn/animate.css/
// in index.html <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
-
在html标签中使用动画
<h1 class="animate__animated animate__bounce">An animated element</h1>
-
使用
transition
组件配合动画-
具体参考https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡的类名
-
使用该组件可以在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果
<transition enter-active-class="animate__animated animate__pulse"> <div v-show="show"> <p>hello</p> <h1>h1111</h1> </div> </transition> <transition leave-active-class="animate__animated animate__shakeX"> <div v-show="show"> <p>byebye</p> <h1>x轴抖动</h1> </div> </transition> <input class="animate__animated" :class="{'animate__shakeX':shake}" ref="input" />
// 让上面的input框动起来 this.shake = true setTimeout(() => { // 取消晃动样式 this.shake = false }, 800)
-
官网关于transitions这块内容太多了 看不过来先不看了...
-
-
使用自定义属性来定义动画的持续时间
- https://animate.style/#utilities
- 当然animate.css也自带了一些类简化使用
- 包括1秒-5秒,慢,更慢,快,更快,默认是1000ms
- 也可以加入:duration来统一设置入场和离场时候的时长 单位毫秒
- 自定义属性用到或者有空在总结
-
使用
animate__repeat-1
来定义动画效果的重复次数 (1,2,3,infinite)
注意事项
- animate.min.css大概有70kb,正常的大概有将近100kb
- 不要在对行内元素使用
dispplay:inline
需要的话你可以设置该元素为行内块元素display: inline-block
- Animate.css v4的升级带来了破坏性的影响(这样翻译怪),所有类要加前缀
animate__
Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to
animate__
- so a direct migration is not possible.But fear not! Although the default build,
animate.min.css
, brings theanimate__
prefix we also provide theanimate.compat.css
file which brings no prefix at all, like the previous versions (3.x and under).
- 别像一些人的博客搞得那么花里胡哨的,动画要有意义,把用户的目光吸引到特殊的内容上!
- 大块大块的元素就尽量不要使用,可能会很混乱,根元素(html,body)就不要弄动画了