当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
（1）自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
（2）如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用.
（3）如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
一、单元素/组件的过渡
1、过渡的类名
在进入/离开的过渡中，会有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 name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。
2、CSS过渡
/*可以设置不同的进入和离开动画*/
/*设置持续时间和动画函数*/
.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{
transform: translateY(10px);
opacity: 0;
}<!--CSS过渡-->
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>new Vue({
el:"#demo",
data:{
show:true
}
})
3、CSS动画
CSS动画用法同CSS过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。
.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);
}
}<!--CSS动画-->
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>new Vue({
el: '#example-2',
data: {
show: true
}
})4、自定义过渡的类名
·enter-class
·enter-active-class
·enter-to-class (2.1.8+)
·leave-class
·leave-active-class
·leave-to-class (2.1.8+)
它们的优先级高于普通的类名。
如：
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">hello</p>
</transition>5、显性的过渡时间
如：有一系列的过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡持续时间（以毫秒计）：
<transition :duration="1000">...</transition>也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>6、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 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}这些钩子函数可以结合CSS transitions/animations 使用，也可以单独使用。
注：
(1) 当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。
(2)推荐对于仅使用JavaScript过渡的元素添加 v-bind:css=”false”，Vue会跳过CSS的检测。这也可以避免过渡过程中CSS的影响。
二、初始渲染的过渡
可以通过 appear 特性设置节点在初始渲染的过渡
<transition appear>
<!-- ... -->
</transition>这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.8+)
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"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>三、多个元素的过渡
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在<transition>组件中的多个元素设置key是一个更好的实践。
在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：
<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>使用多个v-if的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。如：
<transition>
<button v-if="docState === 'saved'" key="saved">
Edit
</button>
<button v-if="docState === 'edited'" key="edited">
Save
</button>
<button v-if="docState === 'editing'" key="editing">
Cancel
</button>
</transition>可以重写为：
<transition>
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition> // ...
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}Vue提供的过渡模式：
- in-out：新元素先进行过渡，完成之后当前元素过渡离开。
- out-in：当前元素先进行过渡，完成之后新元素过渡进入。
如：
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>四、多个组件的过渡
多个组件的过渡不需要使用key特性。只需要使用动态组件：
.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 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>'
}
}
})
五、列表过渡
1、列表的进入/离开过渡
.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);
}<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<!--tag="p"将会包裹住所有span-->
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{item}}
</span>
</transition-group>
</div>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)
}
}
})
扫一扫
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
