单元素/组件的过渡
使用transition 的封装组件,实现过渡效果,可以给任何元素和组件添加进入/离开过渡
条件渲染 (使用 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>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
过渡的类名
6个切换的class 类比生命周期理解
-
v-enter:开始时。元素被插入之前生效,元素插入后的下一帧移除。
-
v-enter-active:生效时。进行中使用,在插入之前生效,在完成之后移除。该类可以定义进入过渡的时间,延迟和曲线函数。
-
v-enter-to:进入过渡的结束状态。在插入之后下一帧生效 ,在完成之后移除。
-
v-leave:离开过渡。在离开过渡被触发时立刻生效,下一帧被移除。
-
v-leave-active:离开过渡生效时。在离开过渡被触发时立刻生效,在完成之后移除。这个类可以被用来定义离开过渡的时间,延迟和曲线函数。
-
v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效,在过渡/动画完成之后移除。
CSS 过渡
常用的过渡都是使用 CSS 过渡
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
/* slide-fade 是 transition的name */
.slide-fade-enter-active {
transition: all .3s 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
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名:
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
可以和Animate.css结合使用 (了解学习Animate.css https://animate.style/)
例如:
/* 导入Animate.css */
<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
//默认transition名
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
延迟
使用duration来设置过渡持续时间
如下:
<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript 钩子
可以在 attribute 中声明 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 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
//leave 同理
}
结合Velocity.js 学习 https://www.jianshu.com/p/5913903324ff
多个元素过渡
可以使用v-if/v-else来进行多标签过渡
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>Sorry, no items found.</p>
</transition>
注意:相同标签名的元素切换时,要用key来设置唯一的值来标记。
还可以用key来简化v-if/v-else 的例子
<transition>
<button :key="isEditing">
{{ isEditing? 'Save' : 'Edit' }}
</button>
</transition>
Vue提供了过渡模式来解决过渡同时进入和离开发生的问题
in-out:新元素先进行过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡,完成之后新元素过渡进入。
如:
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>
平时常用out-in
多个组件的过渡
使用动态组件 (动态组件知识扩展)
见下例:
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
列表过渡
使用 <transition-group>
组件,注意几个特点:
<transition-group>
会默认呈现为<span>
,可以通过 tag来更换为其他元素- 内部元素总是要提供唯一的key值
- CSS 过渡的类将会应用在内部的元素上
以列表的排序过渡为例:
其中使用到了v-move 来改变元素的定位
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<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>
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)
}
}
})
.flip-list-move {
transition: transform 1s; //FLIP 简单的动画队列 使用 transforms 将元素从之前的位置平滑过渡新的位置
}
补充FLIP知识:https://aerotwist.com/blog/flip-your-animations/
需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案,可以设置为 display: inline-block 或者放置于 flex 中
可复用的过渡
将 <transition>
或者 <transition-group>
作为根组件,然后将任何子组件放置在其中就可以了
动态过渡
通过 name attribute 来绑定动态值
<transition v-bind:name="transitionName">
<!-- ... -->
</transition>