这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战
前言
今天还是复习vue的知识点的一天，我们来看看vue的动画，动画钩子函数以及列表动画，让我们一起来看看吧，学过的同学也来回顾一下。
animate、动画钩子函数、列表动画
一、自定义过渡动画（讲解用注释加代码清晰一点）
1.1)代码示例
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.hongjilin-enter-active {
transition: all .3s ease;
}
.hongjilin-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
//离场动画
.hongjilin-enter, .hongjilin-leave-to
/* .hongjilin-leave-active for below version 2.1.8 （老版本）*/
{
transform: translateX(10px);
opacity: 0;
}
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<!--取别名类名-->
<transition name="hongjilin">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
二、animate动画库的使用
2.1)导入animate.css文件
<link rel="stylesheet" href="animate.css">
2.2)animate动画使用
1.enter-active-class="指定进入的时候绑定的动画类名" 2.leave-active-class="指定离开的时候绑定的动画类名" 注意:如果元素默认就是显示的,那么第一次不会触发动画,如果想第一次就触发动画.可以再添加一个appear属性
<transition enter-active-class="animated fadeInRight "
leave-active-class=" animated fadeOutRight"
appear>
<h1 v-show="flag1">动起来！</h1>
</transition>
2.3)animate官网
(2.4)mode in-out先进后出 out-in先出后进
<transition appear mode='out-in'>
<!-- :is后面跟的是变量,通过变量来指定组件 -->
<component :is="jilin"></component>
</transition>
三.钩子动画函数
3.1)代码解析（加注释讲解）：
<div>
<button type="button" @click="flag=!flag">快跑</button>
<!-- 定义js的钩子函数 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-show="show" style="width:100px;height:100px;border-radius: 50px;background-color: red;"></div>
</transition>
</div>
let vm = new Vue({
el: "#app",
data: {
flag: false,
},
methods: {
// el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
beforeEnter(el) {
// 设置动画开始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新动画效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px, 350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
四.列表动画
代码解读：
<!DOCTYPE html>
<html lang="en">
<head>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
/* 列表项样式 */
li{
border: 1px dashed #999;
margin:5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width:100%;
}
/* 鼠标列表项悬停效果 */
li:hover{
background-color: grey;
transition: all 0.8s ease;
}
/* transition渐变出入场必写基础项 */
.v-enter,.v-leave-to{
opacity: 0;
transform:translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
/* transition 在删除列表项的同时，使剩余未删除项可同步移动对原位置填充*/
.v-move{
transition:all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 列表项必须用transition-group代替transition包围 -->
<!-- appear属性实现列表项入场式效果，必须写上否则入场没效果 -->
<!-- tag属性如果不设置，则默认为span -->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
//[]不是{}
list:[
{id:1,name:'ess'},
{id:2,name:'red'},
{id:3,name:'rdne'},
{id:4,name:'dnje'}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
this.id=this.name=''
},
del(i){
this.list.splice(i,1)
}
}
})
</script>
</body>
</html>
总结：动画在vue中很重要的，方式只要掌握技巧，就可以举一反三，还是那个句，一步步来，加油！
