CSS動畫-數字輪盤滾動效果實現(元件封裝,快速使用)

小金子J發表於2024-05-17

效果圖:

原理分析:
這玩意就和垂直方向的輪播圖差不多,只是把輪播的圖換成數字

主要實現:
父元件:父元件接收一個curNum屬性,這個屬性代表當前需要顯示的數字。它將這個數字傳遞給子元件AnimateNum,以便子元件可以正確地顯示和滾動數字。
子元件一 (AnimateNum):這個元件接收父元件傳遞的curNum,並將其拆分為單個數字,然後為每個數字建立一個AnimateNumItem例項。每個例項都有其自己的延遲時間,以便它們可以依次停止滾動,從而建立一個動態的滾動效果。
子元件二 (AnimateNumItem):這個元件負責實現單個數字的滾動動畫。它接收num、delay和size三個屬性。num屬性決定了數字的位置,delay屬性決定了動畫的延遲時間,size屬性用於設定數字的大小。元件內部使用了CSS動畫來實現數字的滾動效果。

相關文章