有時候我們經常需要一些動態的過渡,比如列表元素的變化,只是若是隻有數據改變顯得有些生硬,需要一些過渡的效果。
如果使用v-for獲取的所有元素,使用transition-group實現過渡效果。
實現代碼:
1.html:
<transition-group class="all_net_data all_net_data_transition" appear tag="div"> <div class="each_net_data" v-for="(item,index) in netData_data" :key="item.id"> <img :src="item.src1"> </div> </transition-group>
2.css:
.v-enter,.v-leave-to{ opacity: 0; transform: translateY(80px); } .v-enter-active,.v-leave-active{ transition: all 0.6s ease; } /*v-move 和 v-leave-active 配合使用,能夠實現列表後續的元素,漸漸地漂上來的效果 */ .v-move{ transition: all 0.6s ease; } .v-leave-active{ position: absolute; }
3.點擊按鈕的方法,自己編寫,比如,js:
clickRight(){ this.netData_index ++; this.netData_data = this.netData.slice(this.netData_index, this.netData_index+3); },
實現效果:
比如上面的這個截圖,需要點擊左右按鈕實現顯示元素改變的一個過渡。
注意:
1.使用transition-group時,tag表示指定是什麼元素,若是不寫默認爲span,
2.在v-for循環時,需要給定key值,表示的是在切換元素時,是依據什麼來進行改變的,需要是元素的唯一值。若不是唯一的,則不顯示切換的過渡效果。也就是說是否顯示過渡效果是看元素的key值是否改變。
3.該例子中是每次點擊均右移/左移一個新的元素。