初始渲染的過渡

appear

在transition中添加appear

<transition name="v1" appear><div class="box" v-if="isShow"></div> </transition>

自定義初始渲染過渡

appear-active-class <transitionname="v1"appearappear-active-class="animate__animated animate__pulse"><div class="box" v-if="isShow"></div> </transition>

單元素在transition下面，只有一個根標(biāo)簽,可以在里面嵌套別的

<transition appearenter-active-class="animate__animated animate__zoomIn animate__delay-2s"> <div class="box"><p></p> </div> </transition>

?

單組件跟元素差不多一樣，都在放在tranition默認(rèn)也是使用v-enter…（6個class）?

單個組件的過渡

單組件跟元素差不多一樣，都在放在tranition默認(rèn)也是使用v-enter…（6個class）

多元素過渡

在transition包裹中有多個根節(jié)點(diǎn)，當(dāng)有相同標(biāo)簽名的元素切換時，需要通過 key 設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容。不會刪除從而不會應(yīng)用過渡效果

• 多個元素如果標(biāo)簽名稱一樣，一定要給每個元素設(shè)置唯一的key值，否則vue為了提升效率，只會更新元素內(nèi)容，而不會刪除和插入新元素

• 過渡類只有在元素插入和刪除的過程中才會生效，所以元素切換就不會有過渡效果

• 不同的標(biāo)簽名稱也可以設(shè)置上key

案例：

<template><div><div><button @click="payMethod = 'wechat'">微信支付</button><button @click="payMethod = 'alipay'">支付寶支付</button></div><transition name="fade"><imgv-if="payMethod === 'wechat'"key="wechat"src="https://img0.baidu.com/it/u=1942360133,71176072&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=356"alt="" /><imgv-elsekey="alipay"src="https://img0.baidu.com/it/u=3859818981,673050174&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""/></transition></div> </template> <script> export default {data() {return {payMethod: "wechat",};}, }; </script> <style scoped> img {width: 300px;height: 180px; } .fade-enter,.fade-leave-to{opacity: 0; } .fade-enter-active,.fade-leave-active{transition: opacity 1s; } </style>

設(shè)置絕對定位，使圖片脫離文檔流在一個地方展示

img {width: 300px;height: 180px;position: absolute; } .fade-enter-active,.fade-leave-active{position: absolute;transition: opacity 1s; }

[

](https://imgtu.co

m/i/ON1MLQ)

過渡模式

如果上邊的情況不使用絕對定位的話，可以在transition上添加一個mode屬性

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

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

  <transition name="fade" mode="in-out"><imgv-if="payMethod === 'wechat'"key="wechat"src="https://img0.baidu.com/it/u=1942360133,71176072&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=356"alt="" /><imgv-elsekey="alipay"src="https://img0.baidu.com/it/u=3859818981,673050174&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""/></transition>

  效果：

  與使用絕對定位的區(qū)別在于：使用絕對定位可以看到這種交互的效果

多元素過渡的另外一種寫法（動態(tài)生成）

<img :src="payMethod === 'wechat' ? wechat : alipay" alt="" :key="payMethod"/>

一定要加上key，否則不會應(yīng)用過渡效果 key的值一定要是動態(tài)生成的

動態(tài)組件

一個總的，把選擇都做成組件，比如，男，女的一共三個，一個總的，一個男的為組件，一個女的為組件，

如果想讓這個男組件和女組件，同時在總的顯示，之前的話得在這個總的組件加創(chuàng)建子路由（children），現(xiàn)在可以在總的里面使用<component></component>這個也是相當(dāng)于一個占位符，用這個必須要有一個is屬性，這個屬性綁定的必須是data里面的

• 只需要引入，不需要定義路由規(guī)則

如果想讓上面切換自如的話，最好把is，value，v-model的值都是一樣的；組件都是一樣的；一變都變。is就是組件選擇的

總結(jié)

以上是生活随笔為你收集整理的动画多个元素过渡 多个组件过渡 以及过渡模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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