簡單過渡效果實現

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

/* 進場動畫 */ .kerwin-enter-active {animation: aaa 1.5s; } /* 出場動畫 */ .kerwin-leave-active {animation: aaa 1.5s reverse; } /* 定義動畫的名字和開始到結束的樣式 */ @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}})

通過上述html，css，js代碼就能實現一個最簡單的元素過渡的效果。
如果進出場動畫對應的樣式定義為：kerwin-enter-active，kerwin-leave-active。那么頁面除了上面那種寫法外，還有種簡單的寫法

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

多個元素過渡

在html代碼中使用v-if v-else用來控制多個元素的過渡。mode表示進出動畫的順序

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

多個組件過渡

使用component標簽實現動態組件效果。對每個動態組件包上一個transition，從而實現多個組件過渡

<keep-alive><transition name="kerwin" mode="out-in"><component :is="which"></component></transition> </keep-alive><footer><ul><li @click=" which='home' ">首頁</li><li @click=" which='list' ">列表</li><li @click=" which='shopcar' ">購物車 </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>` })

多個列表過渡

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

總結

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

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