點擊上方?前端瓶子君，關(guān)注公眾號

回復(fù)算法，加入前端編程面試算法每日一題群

1. 前言

快要雙十一了，然后公司要制作一個展示的電子大屏，其中總金額的數(shù)字需要滾動的切換效果，類似于這樣:

2. 思考&實現(xiàn)

2.1 思考

誒，作為十年代碼經(jīng)驗~常年摸魚~的我，想起來vue中的transition-group可以實現(xiàn)類似的效果,首先來看看官網(wǎng)的案例^[1]效果:

2.2 實現(xiàn)

于是我們先參照官網(wǎng)實現(xiàn)一個簡單的效果:

由于項目比較簡單，所以這里采用的是cdn方式，代碼如下:

????
????
????
????

????



????
????????
????????????￥
????????????
????????????????
????????????????????{{item}}

????????????
????????


????

現(xiàn)在離完整的效果，其實只差一步了，現(xiàn)在由于原來的數(shù)字會占用空間，所以導(dǎo)致離開的和進入的沒有在同一直線上，所以，我們加上position:absoulte,再使用left定位將它們固定在合理的位置上,代碼如下:

?"app">
????<div?id="amount">
????????<div?style="display:?flex;">
????????????<span>￥span>
????????????<transition-group?name="list"?tag="p"?style="position:?relative;">
????????????????<p?style="display:?inline-block;position:?absolute;"?v-for="(item?,?index)?????????????????????in?todayAmountComputed"
????????????????????:style="{
????????????????????left:??index?*?50?+?'px',
????????????????????}"?:key="item?+?index">
????????????????????{{item}}p>
????????????transition-group>
????????div>
????div>
</body>

復(fù)制代碼

此時就會呈現(xiàn)出下列效果:

哇咔咔，很接近了，有木有。

3. 注入靈魂

嘿嘿嘿，最后就是注入靈魂,給每個數(shù)字添加一點點延遲:

"app">
????<div?id="amount">
????????<div?style="display:?flex;">
????????????<span>￥span>
????????????<transition-group?name="list"?tag="p"?style="position:?relative;">
????????????????<p?style="display:?inline-block;position:?absolute;"?v-for="(item?,?index)?????????????????????in?todayAmountComputed"
????????????????????:style="{
????????????????????left:??index?*?50?+?'px',
????????????????????'transition-delay':?0.1?*?index?+?'s'
????????????????????}"?:key="item?+?index">
????????????????????{{item}}p>
????????????transition-group>
????????div>
????div>
</body>
復(fù)制代碼

最終效果如下:

最后附上最終代碼鏈接參考^[2]:https://gitee.com/Agrement/javascript/blob/master/%E6%8E%98%E9%87%91/index.html

4. 總結(jié)

關(guān)于本文

作者：RadiumAg

https://juejin.cn/post/7019597165538312200

最后