效果一覽

愛心效果

材料：愛心圖標兩個，沒有我這種 icon 組件的用 png 圖片代替

<transition :name=' isLike ? ’zoom’ : ’’ ' mode='out-in'> <!-- 愛心圖標 --> <icon data='@icon/like.svg' color='#FF0000' v-if='isLike' key='like'></icon> <icon data='@icon/unlike.svg' color='#333333' v-else key='unlike'></icon></transition>

因為在點贊時有動畫，取消點贊不要動畫，所以 transition 的 name 屬性需要根據(jù) isLike 變量變化，當 isLike 為 true 時，給他 zoom 動畫，否則不給動畫。動畫模式是 out-in 即先出后進。原來的圖標先從大變小，然后新圖標再從小變大。

這里注意當兩個切換的組件名稱一致時，需要加 key 屬性，以區(qū)分兩個組件，否則動畫不會生效

接下來寫 css

/** 動畫進行時的class **/.zoom-enter-active, .zoom-leave-active { transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);}/** 設(shè)置進場開始的狀態(tài)和離場結(jié)束的狀態(tài)，都是縮放到0 **/.zoom-enter, .zoom-leave-to { transform: scale(0);}/** 設(shè)置進場結(jié)束的狀態(tài)和離場開始的狀態(tài), 都是縮放到1 **/.zoom-enter-to, .zoom-leave { transform: scale(1);}

根據(jù)官方文檔描述，.name-enter-active 和 .name-leave-active 會在動畫進行時設(shè)置到 icon 組件的 class 中，所以這里我們設(shè)置 transition 的動畫屬性，時間以及曲線。

因為我們需要在放大時略微比 scale(1) 要大一點再回到正常大小，所以要自定義動畫曲線 cubic-bezier(0.42, 0, 0.34, 1.55) 。這個曲線怎么來的呢？

打開 chrome 的調(diào)試面板，隨便找個 dom 設(shè)置 transition-timing-function: ease; 然后點擊 ease 旁邊的曲線小圖標

拖動拉桿就可以調(diào)整曲線

在動畫快結(jié)尾的時候，使曲線超出結(jié)束點即可。

然后復制曲線面板下面的值 cubic-bezier(0.25, 0.1, 0.27, 1.32) 即可。

更多關(guān)于動畫時間曲線的知識，這里就不贅述了，網(wǎng)上有很多相關(guān)知識。

關(guān)于縮放部分，按照上述 css 設(shè)定以及 mode='out-in' 動畫模式是先出后進，在點贊時。

原來的愛心開始離場，此時原來愛心縮放狀態(tài)為 1，即大小的 100% 愛心離場動畫進行中，此時開始從 1 縮放到 0，即大小的 0% 原愛心離場完成，新愛心開始進場，此時新愛心縮放狀態(tài)為 0 新愛心進場動畫進行中，此時開始從 0 動畫縮放到結(jié)束狀態(tài) 1

當取消點贊的時候，isLike 為 false，transition 的 name 就等于空字符串，此時就不會有動畫了。

數(shù)字滾動動畫

因為只是數(shù)字的變化，因此 transition 里只需要一個 div 即可。只是要注意 div 設(shè)置 key，以標識數(shù)據(jù)變動。

<div class='like-num-wrapper'> <transition :name='item.is_like ? ’plus’ : ’minus’'><div : :key='item[’like_num’]'> {{item[’like_num’]}}</div> </transition></div>

.like-num-wrapper { position: relative; margin-left: 16px; text-align: end; font-size: 13px; height: 17px; overflow-y: hidden; .like-num { top: 0; left: 0; position: relative; line-height: 17px; } }

需要注意我們?yōu)榱撕糜嬎闵舷聺L動的距離，所以需要把數(shù)字的高度定死在 17px，接下來寫 transition 的動畫 class。我們通過點贊狀態(tài)來判斷應(yīng)該用那一套動畫，點贊時 transition 的 name 是 plus ，取消點贊時是 minus 。

// 點贊數(shù)字+1動畫.plus-enter-active, .plus-leave-active { transition: all .3s ease-in;}.plus-enter, .plus-leave { transform: translateY(0);}.plus-enter-to, .plus-leave-to { transform: translateY(-17px);}// 點贊數(shù)字-1動畫.minus-enter-active, .minus-leave-active { transition: all .3s ease-in;}.minus-enter { transform: translateY(-34px);}.minus-enter-to { transform: translateY(-17px);}.minus-leave { transform: translateY(0);}.minus-leave-to { transform: translateY(17px);}點贊動畫

點贊動畫很簡單，在點贊時會在老的數(shù)字div下面生成一個新數(shù)字div。此時只需要讓他們都往上移動 17px 即可。

因為取消點贊是數(shù)字從上往下滾動，所以需要讓數(shù)字 1 的初始位置在 2 上面。所以寫出如下代碼，設(shè)定數(shù)字 1 的動畫初始位置

.minus-enter { transform: translateY(-34px);}

為什么是 -34px ？因為數(shù)字div的高度是 17px 往上移 17px 會和 2 重疊，那么數(shù)字 1 再往上移動 17px 就會出現(xiàn)在 2 的上面。-17-17 = 34 這一切都發(fā)生在電光火石之間。

接下來在 .minus-enter-to 中位移到 -17px 就可以實現(xiàn) 1 往下滾動到 2 這個效果了。

數(shù)字 2 的離場動畫就簡單多了 直接從 0 到 17px 就可以滾出去了。

至此整個點贊效果就完成了

以上就是Vue transition實現(xiàn)點贊動畫效果的示例的詳細內(nèi)容，更多關(guān)于vue transition實現(xiàn)點贊效果的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！