vue总结 04过渡--进入/离开 列表过渡

进入/离开 & 列表过渡

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不一样方式的应用过渡效果。
包括如下工具：

• 在 CSS 过渡和动画中自动应用 class
• 能够配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操做 DOM
• 能够配合使用第三方 JavaScript 动画库，如 Velocity.js

在这里，咱们只会讲到进入、离开和列表的过渡，你也能够看下一节的 管理过渡状态。

单元素/组件的过渡

Vue 提供了 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; }

Toggle

hello

当插入或删除包含在 transition 组件中的元素时，Vue 将会作如下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，若是是，在恰当的时机添加/删除 CSS 类名。

2. 若是过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

3. 若是没有找到 JavaScript 钩子而且也没有检测到 CSS 过渡/动画，DOM 操做 (插入/删除) 在下一帧中当即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不一样)

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入以前生效，在元素被插入以后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入以前生效，在过渡/动画完成以后移除。这个类能够被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入以后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成以后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时马上生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时马上生效，在过渡/动画完成以后移除。这个类能够被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发以后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成以后移除。

对于这些在过渡中切换的类名来讲，若是你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。若是你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和 v-leave-active 能够控制进入/离开过渡的不一样的缓和曲线，在下面章节会有个示例说明。

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-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; }

Toggle render

hello

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会当即删除，而是在 animationend 事件触发时删除。

示例：(省略了兼容性前缀)

<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 } })

.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); } }

Toggle 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.

自定义过渡的类名

咱们能够经过如下特性来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其余第三方 CSS 动画库，如 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 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 } })

Toggle render

hello

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它能够是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。若是你使用其中任何一种，Vue 能自动识别类型并设置监听。

可是，在一些场景中，你须要给同一个元素同时设置两种过渡动效，好比 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种状况中，你就须要使用 type特性并设置 animation 或 transition 来明确声明你须要 Vue 监听的类型。

显性的过渡持续时间

2.2.0 新增

在不少状况下，Vue 能够自动得出过渡效果的完成时机。默认状况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也能够不这样设定——好比，咱们能够拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种状况下你能够用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

你也能够定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

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 的简单例子：

<!-- Velocity works very much like jQuery.animate and is a great option for JavaScript animations --> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="example-4"> <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>

new Vue({ el: '#example-4', data: { show: false }, 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 }) } } })

Toggle

初始渲染的过渡

能够经过 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>

多个元素的过渡

咱们以后讨论多个组件的过渡，对于原生标签可使用 v-if/v-else 。最多见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>

能够这样使用，可是有一点须要注意：

当有相同标签名的元素切换时，须要经过 key 特性设置惟一的值来标记以让 Vue 区分它们，不然 Vue 为了效率只会替换相同标签内部的内容。即便在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

示例：

<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>

在一些场景中，也能够经过给同一个元素的 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' } } }

过渡模式

这里还有一个问题，试着点击下面的按钮：

off

在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另外一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。

在元素绝对定位在彼此之上的时候运行正常：

off

而后，咱们加上 translate 让它们运动像滑动过渡：

off

同时生效的进入和离开的过渡不能知足全部要求，因此 Vue 提供了 过渡模式

• in-out：新元素先进行过渡，完成以后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成以后新元素过渡进入。

用 out-in 重写以前的开关按钮过渡：

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>

off

只用添加一个简单的特性，就解决了以前的过渡问题而无需任何额外的代码。

in-out 模式不是常常用到，但对于一些稍微不一样的过渡效果仍是有用的。
将以前滑动淡出的例子结合：

off

很酷吧？

多个组件的过渡

多个组件的过渡简单不少 - 咱们不须要使用 key 特性。相反，咱们只须要使用动态组件：

<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; }

A B

Component A

列表过渡

目前为止，关于过渡咱们已经讲到：

• 单个节点
• 同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表，好比使用 v-for ？在这种场景中，使用 <transition-group> 组件。在咱们深刻例子以前，先了解关于这个组件的几个特色：

• 不一样于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也能够经过 tag 特性更换为其余元素。
• 内部元素 老是须要 提供惟一的 key 属性值

列表的进入/离开过渡

如今让咱们由一个简单的例子深刻，进入和离开的过渡使用以前同样的 CSS 类名。

<div id="list-demo" class="demo"> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <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) }, } })

.list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px); }

Add Remove

123456789

这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，咱们下面会解决这个问题。

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不只能够进入和离开动画，还能够改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程当中应用。像以前的类名同样，能够经过 name 属性来自定义前缀，也能够经过 move-class 属性手动设置。

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; }

Shuffle

 

这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从以前的位置平滑过渡新的位置。

咱们将以前实现的例子和这个技术结合，使咱们列表的一切变更都会有动画过渡。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="list-complete-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 name="list-complete" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-complete-item" > {{ item }} </span> </transition-group> </div>

 

new Vue({ el: '#list-complete-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) } } })

.list-complete-item { transition: all 1s; display: inline-block; margin-right: 10px; } .list-complete-enter, .list-complete-leave-to /* .list-complete-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px); } .list-complete-leave-active { position: absolute; }

Shuffle Add Remove

123456789

须要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。做为替代方案，能够设置为 display: inline-block 或者放置于 flex 中

FLIP 动画不只能够实现单列过渡，多维网格也一样能够过渡：

Lazy Sudoku

Keep hitting the shuffle button until you win.

Shuffle

 

列表的交错过渡

经过 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>

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) { 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) } } })

• Bruce Lee
• Jackie Chan
• Chuck Norris
• Jet Li
• Kung Fury

可复用的过渡

过渡能够经过 Vue 的组件系统实现复用。要建立一个可复用过渡组件，你须要作的就是将 <transition> 或者 <transition-group> 做为根组件，而后将任何子组件放置在其中就能够了。

使用 template 的简单例子：

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 的过渡系统来定义的 CSS 过渡/动画 在不一样过渡间切换会很是有用。

全部的过渡特性都是动态绑定。它不只是简单的特性，经过事件的钩子函数方法，能够在获取到相应上下文数据。这意味着，能够根据组件的状态经过 JavaScript 过渡设置不一样的过渡效果。

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <div id="dynamic-fade-demo" class="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-if="stop" v-on:click="stop = false; show = false" >Start animating</button> <button v-else v-on:click="stop = true" >Stop it!</button> </div>

new Vue({ el: '#dynamic-fade-demo', data: { show: true, fadeInDuration: 1000, fadeOutDuration: 1000, maxFadeDuration: 1500, stop: true }, 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 } } ) } } })

Fade In:  Fade Out: 

hello

Start animating

最后，建立动态过渡的最终方案是组件经过接受 props 来动态修改以前的过渡。一句老话，惟一的限制是你的想象力。