簡(jiǎn)單過(guò)渡效果實(shí)現(xiàn)

過(guò)渡效果有一個(gè)最基本的要求：元素必須有變化的過(guò)程，比如是顯示/隱藏元素；刪除/添加元素；元素移動(dòng)，定位模式下設(shè)置偏移量等等。

/* 進(jìn)場(chǎng)動(dòng)畫(huà) */ .kerwin-enter-active {animation: aaa 1.5s; } /* 出場(chǎng)動(dòng)畫(huà) */ .kerwin-leave-active {animation: aaa 1.5s reverse; } /* 定義動(dòng)畫(huà)的名字和開(kāi)始到結(jié)束的樣式 */ @keyframes aaa {0% {opacity: 0;transform: translateX(100px);}100% {opacity: 1;transform: translateX(0px);} } <!-- kerwin-enter-active，kerwin-leave-active是自定義的樣式 --> <transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active"><div v-if="isShow">1111111111111111111</div> </transition> <button @click="isShow=!isShow">show/hide</button> var vm = new Vue({el: "#box",data: {isShow: true}})

通過(guò)上述html，css，js代碼就能實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的元素過(guò)渡的效果。
如果進(jìn)出場(chǎng)動(dòng)畫(huà)對(duì)應(yīng)的樣式定義為：kerwin-enter-active，kerwin-leave-active。那么頁(yè)面除了上面那種寫法外，還有種簡(jiǎn)單的寫法

<transition name="kerwin" appear><div v-if="isShow">2222222222222222222</div> </transition>

多個(gè)元素過(guò)渡

在html代碼中使用v-if v-else用來(lái)控制多個(gè)元素的過(guò)渡。mode表示進(jìn)出動(dòng)畫(huà)的順序

<transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active" mode="out-in"><!-- out -inin-out --><div v-if="isShow" key="1">1111111111111111111</div><div v-else key="2">222222222222222222</div> </transition>

多個(gè)組件過(guò)渡

使用component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)組件效果。對(duì)每個(gè)動(dòng)態(tài)組件包上一個(gè)transition，從而實(shí)現(xiàn)多個(gè)組件過(guò)渡

<keep-alive><transition name="kerwin" mode="out-in"><component :is="which"></component></transition> </keep-alive><footer><ul><li @click=" which='home' ">首頁(yè)</li><li @click=" which='list' ">列表</li><li @click=" which='shopcar' ">購(gòu)物車 </li></ul> </footer> Vue.component("home",{template:`<div>home<input type="text"/></div>` })Vue.component("list",{template:`<div>list</div>` })Vue.component("shopcar",{template:`<div>shopcar</div>` })

多個(gè)列表過(guò)渡

使用transition-group

<ul><transition-group name="kerwin"><li v-for="(item,index) in datalist" :key="item">{{item}}--{{index}}<button @click="handleDelClick(index)">del</button></li></transition-group> </ul> var vm = new Vue({el:"#box",data:{mytext:"",datalist:["1111","222","3333"]},methods:{handleDelClick(index){this.datalist.splice(index,1)}}})

總結(jié)

以上是生活随笔為你收集整理的vue实现元素过渡效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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