Vue的进入和离开和列表的过渡
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.通过钩子函数实现过渡
当只用 JavaScript 过渡的时候,在 enter
和 leave
中必须使用 done
进行回调。否则,它们将被同步调用,过渡会立即完成。但是在调用了done之后就会直接运行到最后,不会进行过渡,没有调用的时候反而不会直接同步被调用。
5.多个组件的过渡
<style> .check-enter-active,.check-leave-active{ transition: all 1s; } .check-enter,.check-leave-to{ //进入和离开的时刻的样式
} </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", } } })