1.单元素/组件的过渡 Css过渡
使用transition分装组件和要使用动画的元素
渲染条件：v-if
渲染展示：v-show
动态组件
组件根节点
<!DOCTYPE HTML>
<html charset="UTF-8">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.fade-enter-active, .fade-leave-active {
/* 整个进入页面和离开页面的过程 */
transition: opacity .5s;
/* 将透明度的过渡时间设置为0.5秒 */
}
.fade-enter, .fade-leave-to {
/* 进入和离开页面的时候元素的样式 透明度为0 某个时刻的样式*/
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 通过点击设置show的值，当值是false的时候就将DOM树中的子组件login删除，当删除元素的时候就
掉用了transition的过渡动画。
-->
<button v-on:click="show = !show">
Toggle
</button>
<!-- fade 是和 style中选择器名字相关 -->
<transition name="fade">
<login v-if="show"></login>
<!-- 通过if来将子组件进行显示和切换 -->
</transition>
</div>
<!-- 登录子组件 -->
<template id="login">
<div>
<h1>登录组件</h1>
</div>
</template>
<script>
new Vue({
el:"#app",
data:{
show:true,
},
components:{
login:{
template:"#login"
}
}
})
</script>
</body>
</html>
如果组件使用transition进行分装的时候，Vue会自动的在合适的时间添加和删除类名。
如果该组件中有设定钩子函数，也会在合适的时间被调用。如果啥也没就直接执行。
v-enter v-enter-to v-eave v-leave-to 都是表示某一个时刻的样式，v-enter-active v-leave-active 表示整个过渡时间段的样式。
分别表示:刚进入页面的时候，完全进入页面，刚离开页面的时候，完全离开页面的时候。
2.Css动画
Css动画和Css过渡之间的区别： 动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationed事件触发的时候被删除。
.bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
3.自定义过渡的类名
一般用于第三方库，例如是在
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div>
自定义的类要比普通的类的优先级高
同时使用过渡和动画的时候可以使用animationend ，transitionend监听事件来判断动画和过渡是否完成 检测的时候只有动画的时候没有任何效果，该事件并未触发，具体未知。
过渡时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
//
<transition :duration="1000">...</transition>
4.通过钩子函数实现过渡
<div id="app">
<button @click="show = !show">Toggle show</button>
<transition 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">
<login v-if="show"></login>
</transition>
</div>
new Vue({
el:"#app",
data:{
show:true,
},
methods:{
beforeEnter:function(el){
//进入页面的时候
el.style.fontSize = "13px";
el.style.color = "red";
},
enter:function(el){
//进入页面
el.style.transition = "all 0.5s";
// 如果在进入页面这个过程中设置了过程属性
// 就会覆盖原本的beforeEnter中的时刻属性
el.style.color = "blue"
},
afterEnter:function(el){
//进入页面之后
el.style.fontSize = "20px";
el.style.color = "green";
},
enterCancelled:function(el){
//取消进入页面？
},
beforeLeave:function(el){
//离开页面的时候的样式
el.style.color = "pink";
el.style.fontSize = "30px";
},
leave:function(el){
//离开页面
//给过程中的元素设置属性的时候会掩盖时刻的属性
el.style.color ="gold";
el.style.transition = "all 1s";
},
afterLeave:function(el){
//离开页面时刻
el.style.color = "black";
el.style.fontSize = "10px";
},
leaveCancelled:function(el){
//取消离开页面 只在v-show的时候使用
}
},
components:{
login:{
template:"#login",
}
}
})
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。但是在调用了done之后就会直接运行到最后，不会进行过渡，没有调用的时候反而不会直接同步被调用。
5.多个组件的过渡
<style> .check-enter-active,.check-leave-active{ transition: all 1s; } .check-enter,.check-leave-to{ //进入和离开的时刻的样式
opacity: 0;
} </style> </head> <body> <div id="app"> <button @click="show">Toggle show</button> <transition name="check" mode="out-in"> <!-- is用来展示的template组件 mode组件切换的模式 name 过渡的前缀 component占位符 表示展示的组件 -->
//必须是使用is来进行组件的切换 <component :is="view"></component> </transition> </div> <!-- 登录子组件 --> <template id="login"> <div> <h1>登录组件</h1> </div> </template> <!-- 注册子组件 --> <template id="register" > <div > <h1>注册子组件</h1> </div> </template> <script> new Vue({ el:"#app", data:{ view:"login" }, methods:{ show:function(){ if(this.view=="login"){ this.view = "register"; }else{ this.view = "login" } } }, components:{ login:{ template:"#login", }, register:{ template:"#register", } } })