當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2025/3/21 vue 22 豆豆

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

概述

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 將會做以下處理：

自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。

如果過渡組件提供了?JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。

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

過渡的類名

在進入/離開的過渡中，會有 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>，則?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?結合使用十分有用。

示例：

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?屬性定制一個顯性的過渡持續時間 (以毫秒計)：

你也可以定制進入和移出的持續時間：

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: {// --------// 進入中// --------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?使用，也可以單獨使用。

當只用 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-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?特性設置節點在初始渲染的過渡

這里默認和進入/離開過渡一樣，同樣也可以自定義 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>

多個元素的過渡

我們之后討論多個組件的過渡，對于原生標簽可以使用?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 是一個更好的實踐。

示例：

在一些場景中，也可以通過給同一個元素的?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?重寫之前的開關按鈕過渡：

off

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

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

off

很酷吧？

多個組件的過渡

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

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?對于設置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：

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 將元素從之前的位置平滑過渡新的位置。

我們將之前實現的例子和這個技術結合，使我們列表的一切變動都會有動畫過渡。

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 通信，就可以實現列表的交錯過渡：

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

可復用的過渡

過渡可以通過 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?特性來綁定動態值。

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

vue

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

概述

單元素/組件的過渡

過渡的類名

CSS 過渡

CSS 動畫

自定義過渡的類名

同時使用過渡和動畫

顯性的過渡持續時間

JavaScript 鉤子

初始渲染的過渡

多個元素的過渡

過渡模式

多個組件的過渡

列表過渡

列表的進入/離開過渡

列表的排序過渡

列表的交錯過渡

可復用的過渡

動態過渡

總結

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