1.过渡是什么？
- Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
- 过渡就是组件元素从一个状态向另一种状态的切换
2.过渡状态
-
进入过渡
-
v-enter定义进入过渡的开始状态，在元素被插入之前生效，作用于开始的一帧。
-
v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
-
v-enter-to定义进入过渡的结束状态，作用于结束的一帧，在元素被插入之后下一帧生效 (与此同时
v-enter被移除)，在过渡/动画完成之后移除
-
-
离开过渡
-
v-leave定义离开过渡的开始状态，在离开过渡被触发时立刻生效，下一帧被移除
-
v-leave-active定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
-
v-leave-to定义离开过渡的结束状态，在离开过渡被触发之后下一帧生效 (与此同时
v-leave被删除)，在过渡/动画完成之后移除
-
-
生命周期示意图
3.CSS实现过渡
显式定义过渡时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
<style type="text/css">
.slide-fade-enter-active {
transition: all .8s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
.chart{
width: 200px;
height: 30px;
background-color: orange;
}
.box-fade-enter-active, .box-fade-leave-active{
transition: width 3s;
}
.box-fade-enter, .box-fade-leave-to{
width: 0px;
}
.box-fade-enter-to, .box-fade-leave{
width: 200px;
}
</style>
<div id="app">
<button @click="change" v-text="title"></button>
<transition name="slide-fade">
<p v-if="show">Hello Vue</p>
</transition>
<transition name="box-fade">
<div v-if="show" class="chart"></div>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: true,
title: '隐藏'
},
methods:{
change(){
this.show = !this.show
this.title == '显示' ? this.title='隐藏':this.title='显示'
}
}
})
</script>
4.自定义实现过渡
enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet">
<div id="app">
<button @click="change" v-text="title"></button>
<transition enter-active-class="animated bounceInLeft tada"
leave-active-class="animated bounceOutRight tada">
<p v-if="show">Hello Vue</p>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: true,
title: '隐藏'
},
methods:{
change(){
this.show = !this.show
this.title == '显示' ? this.title='隐藏':this.title='显示'
}
}
})
</script>
5.CSS实现动画
@keyframes
<style type="text/css">
.bounce-enter-active {
animation: bounce-in 1s;
}
.bounce-leave-active {
animation: bounce-in 1s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(3);
}
100% {
transform: scale(1);
}
}
</style>
<div id="app">
<button @click="change" v-text="title"></button>
<transition name="bounce">
<p v-if="show">Hello VueHello VueHello Vue</p>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: true,
title: '隐藏'
},
methods:{
change(){
this.show = !this.show
this.title == '显示' ? this.title='隐藏':this.title='显示'
}
}
})
</script>
6.初始动画渲染
appear、appear-class、appear-active-class、appear-to-class
<div id="app">
<button @click="change" v-text="title"></button>
<transition appear appear-active-class="animated swing"
enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutRight">
<p v-if="show">Hello Vue</p>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: true,
title: '隐藏'
},
methods:{
change(){
this.show = !this.show
this.title == '显示' ? this.title='隐藏':this.title='显示'
}
}
})
</script>
7.动画钩子函数
钩子函数可以结合 CSS
transitions/animations使用，也可以单独使用
- 当只用 JavaScript 过渡的时候，在
enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成- 推荐对于仅使用 JavaScript 过渡的元素添加
v-bind:css="false"，Vue 会跳过 CSS 的检测，这也可以避免过渡过程中 CSS 的影响
<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>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{},
methods:{
beforeEnter: function (el) {
},
// 当与 CSS 结合使用时回调函数 done 是可选的
enter: function (el, done) {
done()
},
afterEnter: function (el) {
},
// 只用于 v-show 中
enterCancelled: function (el) {
},
beforeLeave: function (el) {
},
// 当与 CSS 结合使用时回调函数 done 是可选的
leave: function (el, done) {
done()
},
afterLeave: function (el) {
},
// 只用于 v-show 中
leaveCancelled: function (el) {
}
}
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"/>
<div id="app">
<button @click="change" v-text="title"></button>
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<p v-if="show">Hello Vue</p>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: true,
title: '隐藏'
},
methods:{
change(){
this.show = !this.show
this.title == '显示' ? this.title='隐藏':this.title='显示'
},
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
</script>
8.多元素过渡
-
相同标签名过渡
对于相同标签需要通过key属性设置唯一的值作为唯一标识，否则 Vue 为了提高效率只会替换相同标签内部的内容<transition name="fade"> <button v-if="canSave" key="save">保存</button> <button v-else key="edit">编辑</button> </transition> -------------或者------------ <transition> <button v-bind:key="canSave"> {{ canSave ? '保存' : '编辑' }} </button> </transition>对于多个if的情况
<transition name="fade"> <div v-if="color === 'red'" key="red">红色</div> <div v-if="color === 'green'" key="green">绿色</div> <div v-if="color === 'blue'" key="blue">蓝色</div> </transition> -------------或者------------ <transition name="fade"> <div v-bind:key="color">{{colorName}}</div> </transition> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ color:'red' }, computed:{ colorName(){ switch (this.color) { case 'red': return '红色' case 'green': return '绿色' case 'blue': return '蓝色' } } } }) </script> -
不同标签名过渡
对于不同标签可以使用 v-if/v-else来进行过渡<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <span v-else>列表项数据为空，无法渲染</span> </transition> -
过渡模式
对于两个标签元素的过渡，
transition的默认过渡行为是两个元素的进入和离开同时发生in-out：新元素先进行过渡，完成之后当前元素过渡离开out-in：当前元素先进行过渡，完成之后新元素过渡进入
<head> <style type="text/css"> .fade-enter, .fade-leave-to{opacity: 0;} .fade-enter-active, .fade-leave-active{transition: opacity .5s;} </style> </head> <body> <div id="app"> <button @click="change">改变颜色</button> <transition name="fade" mode="out-in"> <button :key="color" :style="colorStyle">{{colorName}}</button> </transition> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ color: 'red' }, computed:{ colorName(){ switch (this.color) { case 'red': return '红色' case 'green': return '绿色' } }, colorStyle(){ switch (this.color) { case 'red': return {color:'red'} case 'green': return {color:'green'} } } }, methods:{ change:function(){ if(this.color == 'red'){ this.color = 'green' }else{ this.color = 'red' } } } }) </script> </body>
9.多组件过渡
多个组件的过渡简单很多，我们不需要使用key属性，我们只需要使用动态组件
<head>
<style type="text/css">
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<a href="javascript:;" @click="login">登录</a>|
<a href="javascript:;" @click="register">注册</a>
</br></br>
<transition name="component-fade" mode="out-in">
<component v-bind:is="component_name"></component>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
component_name: 'login'
},
methods:{
login(){
this.component_name = 'login'
},
register(){
this.component_name = 'register'
}
},
components:{
'login':{
template:"<span>登录</span>"
},
'register':{
template:"<span>注册</span>"
}
}
})
</script>
</body>
10.列表过渡
渲染整个列表的场景中，使用
<transition-group>组件
- 它会以一个真实元素呈现：默认为一个
span，可以通过tag属性更换为其他元素- 过渡模式不可用，因为我们不再相互切换特有的元素
- 内部元素需要提供唯一的
key属性值- CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身
-
进入离开过渡
<head> <style type="text/css"> .list-item { display: inline-block;margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to{ opacity: 0;transform: translateY(30px); } </style> </head> <body> <div id="app" class="demo"> <button @click="add">添加元素</button> <button @click="remove">移除元素</button> <transition-group name="list" tag="div"> <span v-for="item in items" :key="item" class="list-item"> {{ item }} </span> </transition-group> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ items: ['1','2','3','4','5'], nextnum: 5 }, methods:{ randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add(){ this.items.splice(this.randomIndex(), 0, this.nextnum++) }, remove(){ this.items.splice(this.randomIndex(), 1) } } }) </script> </body> -
排序过渡
Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置
<head> <style type="text/css"> .list-item { display: inline-block;margin-right: 10px; } .list-enter-active{ transition: all 1s; } .list-leave-active { transition: all 1s; position: absolute; } .list-enter, .list-leave-to{ opacity: 0;transform: translateY(30px); } .list-move { transition: transform 1s; } </style> </head> <body> <div id="app" class="demo"> <button @click="shuffle">随机移动</button> <button @click="add">添加元素</button> <button @click="remove">移除元素</button> <transition-group name="list" tag="div"> <span v-for="item in items" :key="item" class="list-item"> {{ item }} </span> </transition-group> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ items: ['1','2','3','4','5'], nextnum: 5 }, methods:{ randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add(){ this.items.splice(this.randomIndex(), 0, this.nextnum++) }, remove(){ this.items.splice(this.randomIndex(), 1) }, shuffle() { this.items = _.shuffle(this.items) } } }) </script> </body> -
交错过渡
通过 data 属性与 JavaScript 通信，就可以实现列表的交错过渡，可以做搜索功能
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> </head> <body> <div id="app" class="demo"> <input type="text" v-model="query" placeholder="请输入姓名"/> <transition-group name="staggered-fade" tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <li v-for="(item,index) in newItems" :key="item" :data-index="index"> {{ item.name }} </li> </transition-group> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ query: '', items: [ {name:'张三'},{name:'李四'},{name:'王五'},{name:'张四'},{name:'王六'} ] }, computed: { newItems(){ return this.items.filter(item => { return item.name.indexOf(this.query) !== -1 }) } }, methods:{ beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } } }) </script> </body> -
可复用过渡
过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，将
<transition>或<transition-group>作为根组件，然后将任何子组件放置在其中就可以了-
使用template实现<div id="app"> <input type="text" v-model="query" placeholder="请输入姓名"/> <mycomponent :query="query" :newItems="newItems"> <li v-for="(item,index) in newItems" :key="item" :data-index="index"> {{ item.name }} </li> </mycomponent> </div> <template id="mytemplate"> <transition-group name="staggered-fade" tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <slot></slot> </transition-group> </template> <script type="text/javascript"> Vue.component('mycomponent',{ template: '#mytemplate', props:['query','newItems'], methods:{ beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } } }) var vm = new Vue({ el: '#app', data:{ query: '', items: [ {name:'张三'},{name:'李四'},{name:'王五'},{name:'张四'},{name:'王六'} ] }, computed: { newItems(){ return this.items.filter(item => { return item.name.indexOf(this.query) !== -1 }) } } }) </script> -
使用函数式组件实现<div id="app"> <input type="text" v-model="query" placeholder="请输入姓名"/> <mycomponent> <li v-for="(item,index) in newItems" :key="item" :data-index="index"> {{ item.name }} </li> </mycomponent> </div> <script type="text/javascript"> Vue.component('mycomponent',{ functional: true, render: function (createElement, context) { var data = { props: { name: "staggered-fade", tag: "ul" }, on: { beforeEnter: function (el) { el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done } ) }, delay) }, leave: function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } } } return createElement('transition-group', data, context.children) } }) var vm = new Vue({ el: '#app', data:{ query: '', items: [ {name:'张三'},{name:'李四'},{name:'王五'},{name:'张四'},{name:'王六'} ] }, computed: { newItems(){ return this.items.filter(item => { return item.name.indexOf(this.query) !== -1 }) } } }) </script>
-
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
