教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

列表的排序過渡

更新時間:2022年02月10日17時35分 來源:傳智教育 瀏覽次數:

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

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

/+ 數字圓圈部分樣式*/
.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;
}
 /*開始插入/移除結束的位置變化*/
 .list -enter, .list-leave-to
   opacity: 0;
   transform: translateY (30px);
}
/*元素定位改變時的動畫*/
.list-move {
   transition: transform ls;
}

保存上述代碼,在瀏覽器中查看運行效果,可以看到在插入或移除元素時實現了平滑的過渡。

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

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载