Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程

更新時間：2022年04月09日 09:25:16 作者：努力_才幸福

這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

transition單個節(jié)點過渡與transition-group列表過渡

transition：只能滿足單個節(jié)點的過渡效果，在多個節(jié)點的渲染上顯得力不從心

為了更好適用于更多的場景，vue 提供 <transition-ground>來多個元素的過渡

首先創(chuàng)建了一個簡單的應用，通過button 來實現(xiàn)動態(tài)的加減，使用了啊你，實際效果可運行一下代碼

<body> ?
? ? ? ?<div id="app"> ?
? ? ? ?<button @click="add">add</button> ?
? ? ? ?<button @click="move">remove</button> ?
? ? ? ? ? ?<transition-group ?
? ? ? ? ? ?name="list" ?
? ? ? ? ? ?enter-active-class="animated bounceInDown" ?
? ? ? ? ? ?leave-active-class="animated bounceOut" ?
? ? ? ? ? ?> ?
? ? ? ? ? ? ? ?<li v-for="item in num" :key="item">{{item}}</li> ?
? ? ? ? ? ?</transition-group> ?
? ? ? ?</div> ?
??
? ?</body> ?

? ?<script> ?
? ? ? ?var app=new Vue({ ?
? ? ? ? ? ?el:"#app", ?
? ? ? ? ? ?data:{ ?
? ? ? ? ? ? ? ?show:true, ?
? ? ? ? ? ? ? ?num:10, ?
? ? ? ? ? ? ? ?statu:false ?
? ? ? ? ? ?}, ?
? ? ? ? ? ?methods:{ ?
? ? ? ? ? ? ? ?add:function(){ ?
? ? ? ? ? ? ? ? ? ? ?this.num++; ?
? ? ? ? ? ? ? ? ? ?}, ?
? ? ? ? ? ? ? ?move:function(){ ?
? ? ? ? ? ? ? ? ? ?this.num--; ?
? ? ? ? ? ? ? ?} ?
? ? ? ? ? ?} ?
? ? ? ?}); ?
? ?</script> ?

transition-group：???????擁有transition所有屬性

但是需要關注的是它們的不同之處：

transition本身不會渲染出元素
但是transition-group 會渲染出元素節(jié)點；默認 tag屬性為<span>，可修改。

ps:transition-group 的元素必須指定key 屬性

在列表元素的動態(tài)加入移除中，整個列表會因為元素的改變而相應的改變位子，這些位子屬性的改變會很生硬，所以transition-group給出prop move-class;支持通過 CSS transform 過渡移動。當一個子節(jié)點被更新，從屏幕上的位置發(fā)生變化，它將會獲取應用 CSS 移動類

? ? ? <style> ?
? ? ? ? .div1{ ?
? ? ? ? ? ? width:156px; ?
? ? ? ? } ?
? ? ? ? .cla1{ ?
? ? ? ? ? ? border:1px solid #222; ?
? ? ? ? ? ? display:inline-block; ?
? ? ? ? ? ? width:50px; ?
? ? ? ? ? ? height:50px; ?
? ? ? ? ? ? text-align: center; ?
? ? ? ? ? ? vertical-align: middle; ?
? ? ? ? } ?
? ? ? ? ? ? .flip-list-move { ?
? transition: transform 1s; ?
} ?
? ? ? ? </style> ?

? ? <body> ?
? ? ? ? <div id="app"> ?
? ? ? ? <button @click="chang">reverse</button> ?
? ? ? ? <transition-group tag="div" class="div1" name="flip-list"> ?
? ? ? ? ? ? <span class="cla1" v-for="item in list" :key="item">{{item}}</span> ?
? ? ? ? </transition-group> ?
??
? ? ? ? <button @click="add">add</button> ?
? ? ? ? <button @click="move">remove</button> ?
? ? ? ? ? ? <transition-group ?
? ? ? ? ? ? tag="ul" ?
? ? ? ? ? ? name="flip-list" ?
? ? ? ? ? ? enter-active-class="animated bounceInDown" ?
? ? ? ? ? ? leave-active-class="animated bounceOut" ?
? ? ? ? ? ? > ?
? ? ? ? ? ? ? ? <li v-for="(item,index) in num" :key="item">{{item}}={{index}}</li> ?
? ? ? ? ? ? </transition-group> ?
? ? ? ? </div> ?
? ? </body> ?

? ? <script> ?
? ? function shuffle(arr){ ?
? ? var result = [], ?
? ? ? ? random; ?
? ? while(arr.length>0){ ?
? ? ? ? random = Math.floor(Math.random() * arr.length); ?
? ? ? ? result.push(arr[random]) ?
? ? ? ? arr.splice(random, 1) ?
? ? } ?
? ? return result; ?
} ?
? ? ? ? var app=new Vue({ ?
? ? ? ? ? ? el:"#app", ?
? ? ? ? ? ? data:{ ?
? ? ? ? ? ? ? ? show:true, ?
? ? ? ? ? ? ? ? n:3, ?
? ? ? ? ? ? ? ? num:[1,2,3], ?
? ? ? ? ? ? ? ? list:[1,2,3,4,5,6,7,8,9], ?
? ? ? ? ? ? ? ? statu:false ?
? ? ? ? ? ? }, ?
? ? ? ? ? ? methods:{ ?
? ? ? ? ? ? ? ? chang:function(){ ?
? ? ? ? ? ? ? ? ? ? this.list=shuffle(app.list); ?
? ? ? ? ? ? ? ? }, ?
? ? ? ? ? ? ? ? add:function(){ ?
? ? ? ? ? ? ? ? ? ? ? this.num.splice(3,0,++this.n) ?
? ? ? ? ? ? ? ? ? ? }, ?
? ? ? ? ? ? ? ? move:function(){ ?
? ? ? ? ? ? ? ? ? ? ?this.num.splice(3,1) ?
? ? ? ? ? ? ? ? ? ? ?console.log(this.num) ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? } ?
? ? ? ? }); ?
? ? </script> ?

transition的過渡作用和transition-group

<transition>標簽有兩個屬性，name 屬性和 mode 屬性。

transition：里的 name 值fade 就是 .fade-enter-active,類名開頭的 fade，

<transition name="fade" mode="out-in">
? ?<router-view/>
? ?<router-view class="left" name="nav" />
? ?<router-view class="right" name="con" />
</transition>
? ? ??
.fade-enter-active, .fade-leave-active {
? transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
? opacity:0;
}

注意：transition 里面的<div key="c">111222</div>的內(nèi)容是不顯示，如果要顯示內(nèi)容需要把 transition 標簽換成 transition-group 標簽，

transition-group：標里的所有子元素都要有key值，不然過渡效果是顯示不出來的，而且每個子元素標簽的key值是不一樣的，不能重復。

<transition-group name="aaa" mode="in-out">
? ? <router-view key="d"/>
? ? <router-view class="left" name="nav" key="a" />
? ? <router-view class="right" name="con" key="b" />
? ? <div key="c">111222</div>
</transition-group>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: