多元素过渡理解和一点透
生活随笔
收集整理的這篇文章主要介紹了
多元素过渡理解和一点透
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
多元素過渡
- 當(dāng)有相同標(biāo)簽名的元素切換時, 需要通過key attribute 設(shè)置唯一的值來標(biāo)記以讓Vue區(qū)分它們,否則vue為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容;
- 過渡模式 mode
- in-out: 新元素先進(jìn)行過渡, 完成之后當(dāng)前元素過渡離開;
- out-in: 當(dāng)前元素先進(jìn)行過渡, 完成之后新元素過渡進(jìn)入;
eg
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>多元素的過渡</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">/* 過渡樣式fade-enter-active進(jìn)入 ; fade-leave-active離開*/.fade-enter-active, .fade-leave-active {transition: opacity .5s;}/* fade-enter進(jìn)入 fade-leave-to離開 */.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}</style></head><body><div id="app"><button type="button" @click="isShow=!isShow">點擊</button><!-- 標(biāo)簽transition --><transition name="fade" mode="out-in" @before-enter="beforeEnter" @after-leave="afterLeave"><p v-if="isShow" key="1"> hello Vue </p><p v-else="isShow" key="2"> hello lnmp </p></transition></div></body> </html> <script type="text/javascript"> var vm = new Vue({el:'#app',data:{ isShow:true},methods:{// 進(jìn)來之前的操作beforeEnter:function(){console.log('beforeEnter')},// 離開之后的操作afterLeave:function(){console.log('afterLeave') }} }); </script>總結(jié)
以上是生活随笔為你收集整理的多元素过渡理解和一点透的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 以讹传讹的小故事大道理
- 下一篇： IAP商品修改和数据获取，一文带你全部搞