當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js 进入/离开列表过渡

發(fā)布時間：2025/3/21 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js 进入/离开列表过渡小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

概述

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。
包括以下工具：

在 CSS 過渡和動畫中自動應(yīng)用 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

在這里，我們只會講到進(jìn)入、離開和列表的過渡，你也可以看下一節(jié)的?管理過渡狀態(tài)。

單元素/組件的過渡

Vue 提供了?transition?的封裝組件，在下列情形中，可以給任何元素和組件添加進(jìn)入/離開過渡

條件渲染 (使用?v-if)
條件展示 (使用?v-show)
動態(tài)組件
組件根節(jié)點

這里是一個典型的例子：

<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

當(dāng)插入或刪除包含在?transition?組件中的元素時，Vue 將會做以下處理：

自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是，在恰當(dāng)?shù)臅r機添加/刪除 CSS 類名。

如果過渡組件提供了?JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r機被調(diào)用。

如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的?nextTick?概念不同)

過渡的類名

在進(jìn)入/離開的過渡中，會有 6 個 class 切換。

v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進(jìn)入過渡生效時的狀態(tài)。在整個進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)。

v-enter-to:?2.1.8版及以上?定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時?v-enter?被移除)，在過渡/動畫完成之后移除。

v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。

v-leave-to:?2.1.8版及以上?定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時?v-leave?被刪除)，在過渡/動畫完成之后移除。

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的?<transition>，則?v-?是這些類名的默認(rèn)前綴。如果你使用了?<transition name="my-transition">，那么?v-enter?會替換為?my-transition-enter。

v-enter-active?和?v-leave-active?可以控制進(jìn)入/離開過渡的不同的緩和曲線，在下面章節(jié)會有個示例說明。

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

/* 可以設(shè)置不同的進(jìn)入和離開動畫 */ /* 設(shè)置持續(xù)時間和動畫函數(shù) */ .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 過渡，區(qū)別是在動畫中?v-enter?類名在節(jié)點插入 DOM 后不會立即刪除，而是在?animationend?事件觸發(fā)時刪除。

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

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

他們的優(yōu)先級高于普通的類名，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫，如?Animate.css?結(jié)合使用十分有用。

示例：

new Vue({el: '#example-3',data: {show: true} })

Toggle render

hello

同時使用過渡和動畫

Vue 為了知道過渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽器。它可以是?transitionend?或?animationend?，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種，Vue 能自動識別類型并設(shè)置監(jiān)聽。

但是，在一些場景中，你需要給同一個元素同時設(shè)置兩種過渡動效，比如?animation很快的被觸發(fā)并完成了，而?transition?效果還沒結(jié)束。在這種情況中，你就需要使用?type?特性并設(shè)置?animation?或?transition?來明確聲明你需要 Vue 監(jiān)聽的類型。

顯性的過渡持續(xù)時間

2.2.0 新增

在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認(rèn)情況下，Vue 會等待其在過渡效果的根元素的第一個?transitionend?或?animationend?事件。然而也可以不這樣設(shè)定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下你可以用?<transition>?組件上的?duration?屬性定制一個顯性的過渡持續(xù)時間 (以毫秒計)：

你也可以定制進(jìn)入和移出的持續(xù)時間：

JavaScript 鉤子

可以在屬性中聲明 JavaScript 鉤子

<transitionv-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: {// --------// 進(jìn)入中// --------beforeEnter: function (el) {// ...},// 當(dāng)與 CSS 結(jié)合使用時// 回調(diào)函數(shù) done 是可選的enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 離開時// --------beforeLeave: function (el) {// ...},// 當(dāng)與 CSS 結(jié)合使用時// 回調(diào)函數(shù) done 是可選的leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中l(wèi)eaveCancelled: function (el) {// ...} }

這些鉤子函數(shù)可以結(jié)合 CSS?transitions/animations?使用，也可以單獨使用。

當(dāng)只用 JavaScript 過渡的時候，在?enter?和?leave?中必須使用?done?進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過渡會立即完成。

推薦對于僅使用 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-4"><button @click="show = !show">Toggle</button><transitionv-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 = 0el.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?特性設(shè)置節(jié)點在初始渲染的過渡

這里默認(rèn)和進(jìn)入/離開過渡一樣，同樣也可以自定義 CSS 類名。

<transitionappearappear-class="custom-appear-class"appear-to-class="custom-appear-to-class" (2.1.8+)appear-active-class="custom-appear-active-class" > </transition>

自定義 JavaScript 鉤子：

<transitionappearv-on:before-appear="customBeforeAppearHook"v-on:appear="customAppearHook"v-on:after-appear="customAfterAppearHook"v-on:appear-cancelled="customAppearCancelledHook" > </transition>

多個元素的過渡

我們之后討論多個組件的過渡，對于原生標(biāo)簽可以使用?v-if/v-else?。最常見的多標(biāo)簽過渡是一個列表和描述這個列表為空消息的元素：

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

可以這樣使用，但是有一點需要注意：

當(dāng)有相同標(biāo)簽名的元素切換時，需要通過?key?特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要，給在?<transition>?組件中的多個元素設(shè)置 key 是一個更好的實踐。

示例：

在一些場景中，也可以通過給同一個元素的?key?特性設(shè)置不同的狀態(tài)來代替?v-if和?v-else，上面的例子可以重寫為：

<transition><button v-bind:key="isEditing">{{ isEditing ? 'Save' : 'Edit' }}</button> </transition>

使用多個?v-if?的多個元素的過渡可以重寫為綁定了動態(tài)屬性的單個元素過渡。例如：

<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” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進(jìn)入過渡。這是?<transition>?的默認(rèn)行為 - 進(jìn)入和離開同時發(fā)生。

在元素絕對定位在彼此之上的時候運行正常：

off

然后，我們加上 translate 讓它們運動像滑動過渡：

off

同時生效的進(jìn)入和離開的過渡不能滿足所有要求，所以 Vue 提供了?過渡模式

in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。
out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。

用?out-in?重寫之前的開關(guān)按鈕過渡：

off

只用添加一個簡單的特性，就解決了之前的過渡問題而無需任何額外的代碼。

in-out?模式不是經(jīng)常用到，但對于一些稍微不同的過渡效果還是有用的。
將之前滑動淡出的例子結(jié)合：

off

很酷吧？

多個組件的過渡

多個組件的過渡簡單很多 - 我們不需要使用?key?特性。相反，我們只需要使用動態(tài)組件：

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

列表過渡

目前為止，關(guān)于過渡我們已經(jīng)講到：

單個節(jié)點
同一時間渲染多個節(jié)點中的一個

那么怎么同時渲染整個列表，比如使用?v-for?？在這種場景中，使用?<transition-group>?組件。在我們深入例子之前，先了解關(guān)于這個組件的幾個特點：

不同于?<transition>，它會以一個真實元素呈現(xiàn)：默認(rèn)為一個?<span>。你也可以通過?tag?特性更換為其他元素。
過渡模式不可用，因為我們不再相互切換特有的元素。
內(nèi)部元素?總是需要?提供唯一的?key?屬性值。

列表的進(jìn)入/離開過渡

現(xiàn)在讓我們由一個簡單的例子深入，進(jìn)入和離開的過渡使用之前一樣的 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

這個例子有個問題，當(dāng)添加和移除元素的時候，周圍的元素會瞬間移動到他們的新布局的位置，而不是平滑的過渡，我們下面會解決這個問題。

列表的排序過渡

<transition-group>?組件還有一個特殊之處。不僅可以進(jìn)入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的?v-move?特性，它會在元素的改變定位的過程中應(yīng)用。像之前的類名一樣，可以通過?name?屬性來自定義前綴，也可以通過?move-class?屬性手動設(shè)置。

v-move?對于設(shè)置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：

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

這個看起來很神奇，內(nèi)部的實現(xiàn)，Vue 使用了一個叫?FLIP?簡單的動畫隊列
使用 transforms 將元素從之前的位置平滑過渡新的位置。

我們將之前實現(xiàn)的例子和這個技術(shù)結(jié)合，使我們列表的一切變動都會有動畫過渡。

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 過渡的元素不能設(shè)置為?display: inline?。作為替代方案，可以設(shè)置為?display: inline-block?或者放置于 flex 中

FLIP 動畫不僅可以實現(xiàn)單列過渡，多維網(wǎng)格也同樣可以過渡：

Lazy Sudoku

Keep hitting the shuffle button until you win.

Shuffle

列表的交錯過渡

通過 data 屬性與 JavaScript 通信，就可以實現(xiàn)列表的交錯過渡：

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 = thisreturn this.list.filter(function (item) {return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1})}},methods: {beforeEnter: function (el) {el.style.opacity = 0el.style.height = 0},enter: function (el, done) {var delay = el.dataset.index * 150setTimeout(function () {Velocity(el,{ opacity: 1, height: '1.6em' },{ complete: done })}, delay)},leave: function (el, done) {var delay = el.dataset.index * 150setTimeout(function () {Velocity(el,{ opacity: 0, height: 0 },{ complete: done })}, delay)}} })

Bruce Lee
Jackie Chan
Chuck Norris
Jet Li
Kung Fury

可復(fù)用的過渡

過渡可以通過 Vue 的組件系統(tǒng)實現(xiàn)復(fù)用。要創(chuàng)建一個可復(fù)用過渡組件，你需要做的就是將?<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) {// ...}} })

函數(shù)組件更適合完成這個任務(wù)：

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

動態(tài)過渡

在 Vue 中即使是過渡也是數(shù)據(jù)驅(qū)動的！動態(tài)過渡最基本的例子是通過?name?特性來綁定動態(tài)值。

當(dāng)你想用 Vue 的過渡系統(tǒng)來定義的 CSS 過渡/動畫在不同過渡間切換會非常有用。

所有過渡特性都可以動態(tài)綁定，但我們不僅僅只有特性可以利用，還可以通過事件鉤子獲取上下文中的所有數(shù)據(jù)，因為事件鉤子都是方法。這意味著，根據(jù)組件的狀態(tài)不同，你的 JavaScript 過渡會有不同的表現(xiàn)。

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 = thisVelocity(el,{ opacity: 1 },{duration: this.fadeInDuration,complete: function () {done()if (!vm.stop) vm.show = false}})},leave: function (el, done) {var vm = thisVelocity(el,{ opacity: 0 },{duration: this.fadeOutDuration,complete: function () {done()vm.show = true}})}} })

Fade In:??Fade Out:?

hello

Start animating

最后，創(chuàng)建動態(tài)過渡的最終方案是組件通過接受 props 來動態(tài)修改之前的過渡。一句老話，唯一的限制是你的想象力。

from:?https://cn.vuejs.org/v2/guide/transitions.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Vue.js 进入/离开列表过渡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

vue

Vue.js 进入/离开 列表过渡

概述

單元素/組件的過渡

過渡的類名

CSS 過渡

CSS 動畫

自定義過渡的類名

同時使用過渡和動畫

顯性的過渡持續(xù)時間

JavaScript 鉤子

初始渲染的過渡

多個元素的過渡

過渡模式

多個組件的過渡

列表過渡

列表的進(jìn)入/離開過渡

列表的排序過渡

列表的交錯過渡

可復(fù)用的過渡

動態(tài)過渡

總結(jié)

Vue.js 进入/离开列表过渡