css3的transition及transition-group

有時候我們經常需要一些動態的過渡，比如列表元素的變化，只是若是只有數據改變顯得有些生硬，需要一些過渡的效果。

如果使用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.該例子中是每次點擊均右移/左移一個新的元素。