本文详细介绍了Vue中的过渡效果，包括CSS过渡、CSS动画、JavaScript钩子等。Vue在DOM操作时提供多种过渡方式，可以结合CSS类名、第三方库如Animate.css、Velocity.js使用。还讨论了过渡模式、列表过渡、可复用过渡和动态过渡的实现方法。
Vue在插入、更新或者移除DOM的时候，提供多种方式的应用过渡效果
包括以下工具：
- 在CSS过渡和动画中自动应用class
- 可以配合第三方css动画库，如Animate.css
- 在过渡钩子函数中使用JavaScript直接操作DOM
- 可以配合使用第三方JavaScript动画库，如Velocity.js
单元素/组件的过滤
Vue提供了transition的封装组件，在下面的情况中，可以给任何元素和组件增加了entering/leaving过渡
- 条件渲染(v-if)
- 条件渲染(v-show)
- 动态组件
- 组件根节点
例子：点击鼠标实现淡入淡出
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">HELLO</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo",
data : {
show: true
}
});
</script> <style type="text/css" rel="stylesheet">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
</style>当插入和删除包含在transition组件的元素时，Vue会做以下处理：
- 自动嗅探目标元素是否应用了CSS过渡或动画，如果是，在适当的时机添加/删除CSS类名
- 如果过渡组件提供了JavaScript钩子函数，这些钩子函数会在适当的时候被调用
- 如果没有找到JavaScript钩子函数并且没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行（此处的浏览器逐帧动画机制，与Vue，和Vue的
nextTick概念不同）
#过渡的-css-类名：
会有四个(CSS类)名在enter/leave的状态中切换
1.v-enter：定义进入过渡的开始状态，在元素被插入的时生效，在下一个帧移除
2.v-enter-active：定义进入过渡的结束状态，在元素被插入的时候生效，在transition/animation完成之后移除
3.v-leave：定义离开过渡的开始状态，在离开过渡被触发时生效，在下一帧移除
4.v-leave-active：定义离开过渡的开始状态，在离开过渡被触发时生效，在下一个帧移除
对于这些在enter/leave过渡切换的类名，v-是这些类名的前缀，使用<transition name="my-transition">可以重置前缀，比如v-enter 替换为 my-transition-enter
# CSS过渡
常用的过渡都是使用CSS过渡
<div id="demo-slide">
<button v-on:click="show = !show">Slide</button>
<transition name="slide">
<p v-if="show">message</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo-slide",
data: {
show : true
}
});
</script> .slide-enter-active {
transition: all .3s ease;
}
.slide-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-enter,.slide-leave-active {
transform: translateX(10px);
opacity: 0;
}# CSS动画
CSS动画用法同CSS过渡，区别是在动画中v-enter类名在节点中插入DOM后不会立即删除，而是animationend事件触发时删除
<div id="demo-animate">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#demo-animate",
data : {
show : true
}
});
</script> .bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}# 自定义过渡类名
可以通过下面的特征来自定义过渡类名：
enter-classenter-active-classleave-classleave-active-class
上面的优先级高于普通的类名，这对Vue的过渡系统和其他第三方CSS动画库，如animate.css结合使用非常有用
示例：
<div id="demo1">
<button @click="show = !show">Click</button>
<transition name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<P v-if="show">hello</P>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: "#demo1",
data: {
show : true
}
})
</script># 同时使用Transitions和Animations
Vue为了知道过渡额完成，必须设置相应的事件监听器，它可以是transitionend或animationend，这取决于给元素应用的CSS规则，如果使用其中任何一种，Vue能自动识别类型并设置监听。
但是，在一些情景下需要给同一个元素同时设置两种过渡效果，比如animation很快的被触发完并完成了，而transition效果还没结束，在这种情况下，需要使用type特性并设置animate或transition来声明你需要Vue监听的类型
# JavaScript钩子
可以在属性中声明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>// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}这些钩子函数可以结合CSS transitions/animations使用，也可以单独使用
当只有JavaScript过渡的时候，在
enter和leave中，回掉函数done是必须的，否则，它们会被同步调用，过渡会立即完成推荐对于仅使用JavaScript过渡的元素添加
v-bind:css="false"，Vue会跳过CSS的检测，这也可避免过渡过程中CSS的影响
引入 Velocity.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="example-1">
<button @click="show = !show">Toggle</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
<p v-if="show">Demo</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el : "#example-1",
data : {
show : true
},
methods: {
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>初始渲染的过渡
可以通过appear特性设置节点的在初始渲染的过渡
<transition appear>
<!-- ... -->
</transition>这里默认和进入和离开的过渡一样，同时可以自定义CSS类名
<transition
appear
appear-class="custom-appear-class"
appear-active-class="custom-appear-active-class"
>
<!-- ... -->
</transition>自定义JavaScript钩子
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
>
<!-- ... -->
</transition>多个元素的过渡
对于原生的标签可以使用v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>Sorry, no items found.</p>
</transition>注意：当有相同标签名的元素切换时，需要通过
key特性设置唯一的值来标记从而让Vue区分它们，否则Vue为了效率只会替代相同标签内部的内容，所以，可以给组件上的多个元素设置key
示例：
<transition id="demo-2">
<button v-if="isEditing" key="save">Save</button>
<button v-else key="edit">Edit</button>
</transition>
<script type="text/javascript">
new Vue({
el : '#demo-2',
data : {
isEditing : true
}
});
</script>在一些情景中，也可以给同一个元素的key特性设置不同的状态来代替v-if和v-else，上面的例子可以重写为：
<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>也可以通过v-if的多个元素的过滤可以重写为绑定了动态属性的单个元素过渡，例如
<transition>
<button v-if="doState === 'saved'" key="saved">Edit</button>
<button v-if="doState === 'edited'" key="edited">Save</button>
<buton v-if="doState === 'editing'" key="editing">Cancel</buton>
</transition>可以重写为：
<transition id="demo2">
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
<script type="text/javascript">
new Vue({
el : "#demo2",
data : {
docState : "saved"
},
computed : {
buttonMessage : function() {
switch (this.docState) {
case 'saved': return 'Edit';
case 'edited': return 'Save';
case 'editing': return 'Cancel'
}
}
}
})
</script>#过渡模式
效果点击这里
在两个按钮”on“和按钮”off“，在过渡的过程中，两个按钮都被重绘了，一个离开过渡的时候，另一个开始进入过渡，这是transition的默认行为-进入和离开同时发生
在元素绝对定位在彼此之上额度时候运行正常
效果点击这里
然后，加上translate让它们可以运动像滑动过渡
同时生效的进入和离开的过渡不能满足所有要求，所以Vue添加了过渡模式
- in-out：新元素先进行过渡，完成之后当前过渡元素过渡离开
- out-in：当前元素先进行过渡，完成之后新元素过渡进入
用out-in重新写前面的开关按钮的过渡：
<transition id="demo4" name="fade" mode="out-in">
<button v-on:click="change">{{message}}</button>
</transition>
<script type="text/javascript">
new Vue({
el : "#demo4",
data: {
message : "off"
},
methods : {
change : function() {
this.message = this.message == 'off' ? "on" : "off";
}
}
})
</script>多个组件的过滤
多个组件的过滤简单很多，我们不需要使用key属性，相反，我们只需要使用动态组件：
<transition name="component-fade" id="demo5" mode="out-in">
<component v-bind:is="view"></component>
</transition>
<script type="text/javascript">
new Vue({
el : "#demo5",
data : {
view : "v-b"
},
components: {
'v-a' : {
template: '<div>Component A</div>'
},
'v-b' : {
template: '<div>Component B</div>'
}
}
});
</script>列表过渡
<transition-group>组件的特点：
- 不同于
<transition>，它会以一个真实元素呈现 - 内部元素总是需要提供一个唯一的
key属性
# 列表的进入和离开过渡
<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group>
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
<script type="text/javascript">
new Vue({
el: "#list-demo",
data: {
items : [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum : 10
},
methods : {
randomIndex : function() {
return Math.floor(Math.random() * this.items.length);
},
add : function() {
this.items.splice(this.randomIndex(), 0, this.nextNum++);
},
remove : function() {
this.items.splice(this.randomIndex(), 1);
}
}
});
</script>.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-active {
opacity: 0;
transform: translateY(30px);
}#列表的位移过渡
<transition-group>组件还有一个特殊之处，不仅可以进入和离开动画，还可以改变定位，使用这个功能需要用到v-move这个属性，它会在元素的改变定位的过程中应用，像之前的类名一样，可以通过name属性来定义自定义前缀，也可以通过move-class手动设置
v-move对于设置过渡的切换时机和过渡曲线非常有用
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div> <script type="text/javascript">
new Vue({
el : "#flip-list-demo",
data: {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
methods : {
shuffle : function() {
this.items = _.shuffle(this.items);
}
}
})
</script>修改前面的代码：
<div id="list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group>
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
<script type="text/javascript">
new Vue({
el: "#list-demo",
data: {
items : [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum : 10
},
methods : {
randomIndex : function() {
return Math.floor(Math.random() * this.items.length);
},
add : function() {
this.items.splice(this.randomIndex(), 0, this.nextNum++);
},
remove : function() {
this.items.splice(this.randomIndex(), 1);
},
shuffle : function() {
this.items = _.shuffle(this.items);
}
}
});
</script> .list-item {
transition: all 1s;
display: inline-block;
margin-right: 10px;
}
.list-item-enter, .list-item-leave-active {
opacity: 0;
transform: translateY(30px);
}
.list-leave-active {
transition: all 1s;
transform: translateX(10px);
}#列表的渐进过渡
通过data属性与JavaScript属性通信，就可以实现列表的渐进过渡
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
<input v-model="query">
<transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter"
v-on:enter="enter" v-on:leave="leave">
<li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index">
{{ item.msg }}
</li>
</transition-group>
</div>
<script type="text/javascript">
new Vue({
el : "#staggered-list-demo",
data : {
query: "",
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
},
computed: {
computedList : function() {
var vm = this;
return this.list.filter(function(item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}
},
methods : {
beforeEnter : function() {
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>可复用的过渡
可以通过Vue的组件系统实现复用，要创建一个可复用的过渡组件需要将<transition>或者<transition-group>作为根组件，然后放置任何子组件在其中就可以了
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})函数组件更适合完成这个任务：
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})动态过渡
在Vue中即使是过渡也是数据驱动的，动态过渡最基本的例子就是通过name特性来绑定动态值
<transition v-bind:name="transitionName">
<!-- ... -->
</transition>Vue的所有过渡特性都是动态绑定的，它不仅是简单的特性，通过事件的钩子函数方法，可以在获取得到相应上下文数据，这意味着，可以根据组件的状态通过JavaScript过渡设置不同的过渡效果
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="dynamic-fade-demo">
Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
<transition
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<p v-if="show">hello</p>
</transition>
<button v-on:click="stop = true">Stop it!</button>
</div>
<script type="text/javascript">
new Vue({
el: '#dynamic-fade-demo',
data: {
show: true,
fadeInDuration: 1000,
fadeOutDuration: 1000,
maxFadeDuration: 1500,
stop: false
},
mounted: function () {
this.show = false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 1 },
{
duration: this.fadeInDuration,
complete: function () {
done()
if (!vm.stop) vm.show = false
}
}
)
},
leave: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 0 },
{
duration: this.fadeOutDuration,
complete: function () {
done()
vm.show = true
}
}
)
}
}
})
</script>
扫一扫
6015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
