1. 简介
Vue在插入、更新或者移除DOM时,提供了多种不同方式的应用过渡效果 本质上还是使用css3动画,transition、animation
2. 基本用法
使用transition组件,将需要动画的元素放入组件中 <transition name=""> 元素 </transition>
过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。
- v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
- v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
- v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
- v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
- v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
注:对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter。
示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style> .hello{ width: 200px; height: 200px; background: #007AFF; } .fade-enter-active,.fade-leave-active{ transition: all 3s ease; } .fade-enter-active{/*进入后*/ opacity: 1; width: 200px; height: 200px; } .fade-leave-active{ opacity: 0;/*透明度0,当宽高为20的时候变为0*/ width: 20px; height: 20px; } /*进入的初始状态,需要放在.fade-enter-active的后面*/ .fade-enter{ opacity: 0; width: 50px; height: 50px; } </style> </head> <body> <div id="content"> <button @click="show=!show">显示/隐藏</button> <transition name="fade"> <div class="hello" v-show="show">{{msg}}</div> </transition> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js"></script> <script type="text/javascript"> mui.init() var vm = new Vue({ el: "#content", data: { show: false, msg: "hello world!" } }) </script> </body> </html>
钩子函数
可以在属性中声明 JavaScript 钩子
<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" > <!-- ... --> </transition>
示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style> .hello{ width: 200px; height: 200px; background: #007AFF; } .fade-enter-active,.fade-leave-active{ transition: all 3s ease; } .fade-enter-active{/*进入后*/ opacity: 1; width: 200px; height: 200px; } .fade-leave-active{ opacity: 0;/*透明度0,当宽高为20的时候变为0*/ width: 20px; height: 20px; } /*进入的初始状态,需要放在.fade-enter-active的后面*/ .fade-enter{ opacity: 0; width: 50px; height: 50px; } </style> </head> <body> <div id="content"> <button @click="show=!show">显示/隐藏</button> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"> <div class="hello" v-show="show">{{msg}}</div> </transition> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js"></script> <script type="text/javascript"> mui.init() var vm = new Vue({ el: "#content", data: { show: false, msg: "hello world!" }, methods: { beforeEnter: function(el) { // alert("动画进入之前"); }, enter: function(el) { // alert("动画进入时"); }, afterEnter: function(el) { // alert("动画进入之后"); el.style.background="red"; }, beforeLeave: function(el) { // alert("动画即将离开之前"); }, leave: function(el) { // alert("动画离开时"); }, afterLeave: function(el) { // alert("动画离开之后"); el.style.background="blue"; } } }) </script> </body> </html>
3. 结合第三方动画库animate.css一起使用
示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/animate.css" rel="stylesheet" /> <style> .hello{ width: 100px; height: 100px; background: #4CD964; margin: 0 auto; } </style> </head> <body> <div id="content"> <button @click="show=!show">显示/隐藏</button> <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <div class="hello" v-show="show">{{msg}}</div> </transition> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js"></script> <script type="text/javascript"> mui.init() var vm = new Vue({ el: "#content", data: { show: false, msg: "hello world!" } }) </script> </body> </html>
注:使用animate动画库的class时要先加上它的基础class,比如我们要使用从左进入的动画,需这样写:
class="animated bounceInLeft"
4. 多元素动画
<transition-group> 元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ,可以通过 tag 属性配置哪个元素应该被渲染。
注意,每个 的子节点必须有 独立的 key ,动画才能正常工作
<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性,当应用移动类时,将会使用 FLIP 技术 使元素流畅地到达动画终点。
<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>
练习:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/animate.css" rel="stylesheet" /> <style> .hello{ width: 100px; height: 100px; background: blue; margin: 10px auto; } </style> </head> <body> <div id="content"> <input type="text" v-model="name" placeholder="输入一些字符,如果底下元素包含则显示" /> <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <div v-for="(item,index) in arr2" class="hello" :key="index" v-show="show"> {{item}} </div> </transition-group> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js"></script> <script type="text/javascript"> mui.init(); var vm = new Vue({ el: "#content", data: { show: true, msg: "hello world!", arr: ['tom', 'jack', 'chaoyoung', 'mark', 'rose', 'curry'], name: "" }, computed: { //利用计算属性,筛选真正需要显示的arr(也就是包含输入框里的字符的) arr2: function() { var temp = []; this.arr.forEach(value=>{ if (value.includes(this.name)) { console.log('包含:' + '--' + value); temp.push(value); } }) return temp; } }, watch: { name: function(newValue, oldValue) { console.log("name变成了:" + newValue) } } }) </script> </body> </html>
本文暂时没有评论,来添加一个吧(●'◡'●)