VUE之动画与animate.css动画库
前言
-
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
过渡动画原理
-
在进入/离开的过渡中，会有 6 个 class 切换： v-enter（插入）类原理—动画流程概念图 v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除 v-leave（移除）类原理—动画流程概念图： 同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)
概念图
过渡
-
首先回顾下过渡效果的实现
动画
-
借助fade-leave-active和fade-enter-active贯穿整个过程的特性，可以这样去写动画效果 （1）首先将CSS代码修改如下 （2）定义+调用动画效果
公共化动画名
-
顾名思义，就是将动画名提取出来，以后直接使用即可。 公共化动画名步骤： 1、自行随意定义修改动画名 2、不使用默认提供的命名规范，在transition标签里添加相关属性 （1）enter-active-class属性 （2）enter-leave-class属性 公共化动画名小结： 综上所述，当某些动画应用较多时，可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。 语法如下所示
Vue+animate.css动画库
-
【前言】 既然现在可以自己定义enter-active-class和leave-active-class动画类名，决定相关动画效果，借助这个特性，可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。 Vue+animate.css动画库步骤 （1）下载代码库引入 （2）选择相应动画效果类名并引入，如下所示 至此，便可以实现vue+animate.css动画库的结合使用 优势： 像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。 注意： 1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class 2、使用时必须加入animated类名 CSS 动画与CSS 过渡用法类似，区别在于 ①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除 ②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animation end 事件触发时删除
Vue之动画与animate.css动画库代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.demo{
width: 200px;
height: 200px;
background: red;
}
.demo1{
width: 200px;
height: 200px;
background: green;
}
/*1、定义动画*/
@keyframes bounce{
0%{transform: scale(0);}
50%{transform: scale(1.5);}
100%{transform: scale(1);}
}
/*2、调用动画*/
.bounceIn{
transform-origin: left top;
animation: bounce 1s;
}
.bounceOut{
transform-origin: left top;
animation: bounce 1s reverse;
}
</style>
</head>
<body>
<div id="root">
<transition
enter-active-class="bounceIn animated fadeInLeft"
leave-active-class="bounceOut animated fadeOutDownBig"
name="fade">
<div class="demo" v-show="status"></div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
var root = new Vue({
el:#root,
data:{
status:false
},
methods:{
handleClick(){
this.status = !this.status;
}
}
})
</script>
</body>
</html>
以上就是VUE之动画与animate.css动画库的见解，若有疑问请联系小编!
