这篇文章是对于,在 Vue 项目中,使用第 三方动画库 animate.css 步骤的一个总结:
-
Animate.css 开源 CSS 动画库 :
Animate.css 特点:
开源免费 :基于 MIT 开源协议,被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
使用简单 : 只有一个 CSS 文件,引入后以类的方式进行调用,如果使用 jquery,则不影响原有程序架构。
文件小,响应快 : 体积小巧,只有 几十k 的大小,响应速度非常快。
- Animate.css 在 Vue 项目中 安装 :
通过 npm 安装 :
npm install animate.css --save;
或者通过 yarn 安装 :
yarn add animate.css
- Animate.css 引入 Vue 项目中 :
在 main.js 文件中引入 animate.css :
import animated from 'animate.css' Vue.use(animated)
- Animate.css 在 Vue 项目中 使用 :
当我们在 Vue 项目中引入 animate.css 后,开始配合 transition 开始其使用 :
<transition name="bounce" enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__bounceOutRight"> <p v-show="show"></p> </transition> //======================================================================== <div class="animate__animated animate__zoomInRight">我是淡入效果</div>
解析 : enter-active-class 指定进入动画;leave-active-class 指定消失动画。
- 自定义 播放属性 :
可以通过 设定的类名,对播放属性进行控制 :
.yourElement { animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; }
- 通过 JS 动态的 添加 动画 :
在这里,官方提供了一个动态添加和移除动画的方法 :
function animateCSS(element, animationName, callback) { const node = document.querySelector(element) node.classList.add('animated', animationName) function handleAnimationEnd() { node.classList.remove('animated', animationName) node.removeEventListener('animationend', handleAnimationEnd) if (typeof callback === 'function') callback() } node.addEventListener('animationend', handleAnimationEnd) }
通过调用 animateCSS() 这个方法,可以实现对动画效果的动态添加,和动画完毕后的监听回调 :
animateCSS('.my-element', 'bounce') // or animateCSS('.my-element', 'bounce', function() { // Do something after animation })
- 播放延迟 和 播放速度 类名 :
//延迟播放 : //类名 delay-1s ---> 延迟1s //类名 delay-2s ---> 延迟2s //类名 delay-3s ---> 延迟3s //类名 delay-4s ---> 延迟4s //类名 delay-5s ---> 延迟5s <div class="animate__animated animate__bounce animate__delay-2s">Example</div>
//播放速度 : //类名 :slow ---> 播放速度为 2s //类名 :slower ---> 播放速度为 3s //类名 :fast ---> 播放速度为 800ms //类名 :faster ---> 播放速度为 500ms <div class="animate__animated animate__bounce animate__faster">Example</div>
- 更多动画库效果,可以打开 animate.css 官网 查看 ;