在Vue中给元素添加过渡动画：
- 将需要执行动画的元素放在transition标签中
- 每一组transition标签只能控制一个标签的过渡动画，如果在transition中有多个标签，也只能在第一个标签添加过渡动画
- 如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件
- 当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名
- 当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名
- 在.v-enter和.v-leave-to中指定动画动画开始的状态，在.v-enter-active和.v-leave-active中指定动画执行的状态，即可完成过渡动画
- 初始动画设置：默认情况下，第一次进入时没有动画，如果想一进来就有动画，需要给transition添加apper属性，告诉Vue第一次进入就要显示动画
- 给不同的元素指定不同的动画：通过给transition指定name的形式指定在“进入之前/进入之后/进入过程中，离开之前/离开之后/离开过程中”对应的类名，实现不同的元素执行不同的过渡动画
使用transition和类名实现过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.one-enter{
opacity: 0;
}
.one-enter-to{
opacity: 1;
margin-left: 300px;
}
.one-enter-active{
transition: all 2s;
}
.two-enter{
opacity: 0;
}
.two-enter-to{
margin-top: 200px;
opacity: 1;
}
.two-enter-active{
transition: all 2s;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition appear name="one">
<div class="box" v-show="show"></div>
</transition>
<transition appear name="two">
<div class="box" v-show="show"></div>
</transition>
</div>
<script>
let vue = new Vue({
el:'#app',
data:{
show:false
},
methods:{
toggle(){
this.show = !this.show
}
}
});
</script>
</body>
</html>
使用transition和钩子函数实现过渡动画
- 通过tranisition和类名能实现过渡动画，但是存在不能保存动画执行后的状态，即动画执行后会复位，这是因为在Vue内部，是通过给标签动态添加类名，在动画执行结束后删除类名的原因。
- 想要在Vue中保存过渡后的结果：使用函数实现：
v-on:before-enter="beforeEnter" 进入动画之前
v-on:enter="enter" 进入动画执行过程中
v-on:after-enter="afterEnter" 进入动画完成之后
v-on:enter-cancelled="enterCancelled" 进入动画被取消
v-on:before-leave="beforeLeave" 离开动画之前
v-on:leave="leave" 离开动画执行过程中
v-on:after-leave="afterLeave" 离开动画完成之后
v-on:leave-cancelled="leaveCancelled" 离开动画被取消
- 注意点：
3.1 在动画过程中必须写上el.offsetWidth或者el.offsetHeight
3.2 在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
3.3 如果需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用
3.4 默认情况下，即使给transition添加钩子函数，还是会去寻找类名中的样式，需要给transition添加v-bind:css="false"防止Vue默认去寻找类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition appear
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
>
<div class="box" v-show="show"></div>
</transition>
</div>
<script>
let vue = new Vue({
el:'#app',
data:{
show:false
},
methods:{
toggle(){
this.show = !this.show
},
beforeEnter(el){
//动画开始之前
el.style.opacity = '0'
},
enter(el,done){
//进入动画执行过程
el.offsetWidth;//必须在动画执行过程中的回调函数中写上el.offsetWidth / el.offsetHeight
el.style.transition ='all 3s'
setTimeout(function(){
//done函数一定要执行，否则后续的aferEnter函数不会被执行
done();//如果想让元素一进来就有动画，需要把done函数写在延迟函数中
},0)
},
afterEnter(el){
//动画执行完毕的效果
el.style.opacity ='1';
el.style.marginLeft ='500px';
}
}
});
</script>
</body>
</html>
自定义动画类名
enter-class // 进入动画开始之前
enter-active-class // 进入动画执行过程中
enter-to-class // 进入动画执行完毕之后
leave-class // 离开动画开始之前
leave-active-class // 离开动画执行过程中
leave-to-class // 离开动画执行完毕之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.a{
opacity: 0;
}
.b{
transition: all 2s;
}
.c{
opacity: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition appear
enter-class="a"
enter-active-class="b"
enter-to-class="c"
>
<div class="box" v-show="show"></div>
</transition>
</div>
<script>
let vue = new Vue({
el:'#app',
data:{
show:false
},
methods:{
toggle(){
this.show = !this.show
}
}
});
</script>
</body>
</html>
