列表的排序過渡

當(dāng)插入或移除元素的時(shí)候，雖然有過渡動畫，但是周圍的元素會瞬間移動到新的位置，而不是平滑地過渡。為了實(shí)現(xiàn)平滑過渡，可以借助v-move特性。v-move對于設(shè)置過渡的切換時(shí)機(jī)和過渡曲線非常有用。v- move特性會在元素改變定位的過程中應(yīng)用，它同之前的類名一樣，可以通過name屬性來自定義前綴(例如name="list",則對應(yīng)的類名就是list-move),當(dāng)然也可以通過move-class屬性手動設(shè)置自定義類名。

下面我們通過代碼演示v-move的使用。修改例4-13中的CSS部分，借助v-move和定位來實(shí)現(xiàn)元素平滑過渡到新位置的效果，具體代碼如下:

/+ 數(shù)字圓圈部分樣式*/
.list-item {
display: inline-block; margin-right: 10px; background-color: red;
border-radius: 50%; width: 25px; height: 25px; text-align: center;
line- -height: 25px; color: #fff;
}
/* 插人元素過程*/
.list-enter-active {
  transition: all ls;
}
/*移除元素過程*/
.list-leave-active {
   transition: all ls;
   position: absolute;
}
 /*開始插入/移除結(jié)束的位置變化*/
 .list -enter, .list-leave-to
   opacity: 0;
   transform: translateY (30px);
}
/*元素定位改變時(shí)的動畫*/
.list-move {
   transition: transform ls;
}

保存上述代碼，在瀏覽器中查看運(yùn)行效果，可以看到在插入或移除元素時(shí)實(shí)現(xiàn)了平滑的過渡。

Vue使用了FLIP簡單動畫隊(duì)列來實(shí)現(xiàn)排序過渡，所以即使沒有插人或者移除元素，對于元素順序的變化也支持過渡動畫。FLIP 動畫能提高動畫的流暢度，可以解決動畫的卡頓、閃爍等不流暢的現(xiàn)象，它不僅可以實(shí)現(xiàn)單列過渡，也可以實(shí)現(xiàn)多維網(wǎng)格的過渡。FLIP 代表First、Last、 Invert、 Play, 有興趣的讀者可以自行研究學(xué)習(xí)。