列表的排序過(guò)渡

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

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

/+ 數(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;
}
/* 插人元素過(guò)程*/
.list-enter-active {
  transition: all ls;
}
/*移除元素過(guò)程*/
.list-leave-active {
   transition: all ls;
   position: absolute;
}
 /*開(kāi)始插入/移除結(jié)束的位置變化*/
 .list -enter, .list-leave-to
   opacity: 0;
   transform: translateY (30px);
}
/*元素定位改變時(shí)的動(dòng)畫(huà)*/
.list-move {
   transition: transform ls;
}

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

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