Vue transition實現點贊動畫效果的示例
效果一覽
愛心效果
材料:愛心圖示兩個,沒有我這種 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> </transit程式設計客棧ion>
因為在點贊時有動畫,取消點贊不要動畫,所以 transition 的 name 屬性需要根據 isLike 變數變化,當 isLike
為 true
時,給他 zoom 動畫,否則不給動畫。動畫模式是 out-in 即先出後進。原來的圖示先從大變小,然後新圖示再從小變大。
這裡注意當兩個切換的元件名稱一致時,需要加 key 屬性,以區分兩個元件,否則動畫不會生效
接下來寫 css
/** 動畫進行時的class **/
.zoom-enter-active,.zoom-leave-active {
transitDHvuBTBCPLion: all .15s cubic-bezier(0.42,0.34,1.55);
}
/** 設定進場開始的狀態和離場結束的狀態,都是縮放到0 **/
.zoom-enter,.zoom-leave-to {
transform: scale(0);
}
/** 設定進場結束的狀態和離場開始的狀態,都是縮放到1 **/
.zoom-enter-to,.zoom-leave {
transform: scale(1);
}
根據官方文件描述,.name-enter-active 和 .name-leave-active 會在動畫進行時設定到 icon 元件的 class 中,所以這裡我們設定 transition 的動畫屬性,時間以及曲線。
因為我們需要在放大時略微比 scale(1)
要大一點再回到正常大小,所以要自定義動畫曲線 cubic-bezier(0.42,1.55)
。這個曲線怎麼來的呢?
開啟 chrome 的除錯面板,隨便找個 dom 設定 transition-timing-function: ease; 然後點選 ease 旁邊的曲線小圖示
拖動拉桿就可以調整曲線
在動畫快結尾的時候,使曲線超出結束點即可。
然後複製曲線面板下面的值 cubic-bezier(0.25,0.1,0.27,1.32)
即可。
更多關於動畫時間曲線的知識,這裡就不贅述了,網上有很多相關知識。
關於縮放部分,按照上述 css 設定以及 mode="out-in"
動畫模式是先出後進,在點贊時。
- 原來的愛心開始離場,此時原來愛心縮放狀態為 1,即大小的 100%
- 愛心離場動畫進行中,此時開始從 1 縮放到 0,即大小的 0%
- 原愛心離場完成,新愛心開始進場,此時新愛心縮放狀態為 0
- 新愛心進場動畫進行中,此時開始從 0 動畫縮放到結束狀態 1
當取消點讚的時候,isLike
程式設計客棧為 false
,transition 的 name 就等於空字串,此時就不會有動畫了。
數字滾動動畫
因為只是數字的變化,因此 transition 裡只需要一個 div 即可。只是要注意 div 設定 key,以標識資料變動。
<div class="like-num-wrapDHvuBTBCPLper"> <transition :name="item.is_like ? 'plus' : 'minus'"> <div class="like-num" :style="{color: item['is_like'] ? 'red': '#333'}" :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; } }
需要注意我們為了好計算上下滾動的距離,所以需要把數字的高度定死在 17px
,接下來寫 transition 的動畫 class。我們通過點贊狀態來判斷應該用那一套動畫,點贊時 transition 的 name 是 plus
,取消點贊時是 minus
。
// 點贊數字+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); } // 點贊數字-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); }
點贊動畫
點贊動畫很簡單,在點贊時會在老的數字div下面生成一個新數字div。此時只需要讓他們都往上移動 17px 即可。
因為取消點贊是數字從上往下滾動,所www.cppcns.com以需要讓數字 1 的初始位置在 2 上面。所以寫出如下程式碼,設定數字 1 的動畫初始位置
.minus-enter { transform: translateY(-34px); }
為什麼是 -34px ?因為數字div的高度是 17px 往上移 17px 會和 2 重疊,那麼數字 1 再往上移動 17px 就會出現在 2 的上面。-17-17 = 34
這一切都發生在電光火石之間。
接下來在 .minus-enter-to
中位移到 -17px 就可以實現 1 往下滾動到 2 這個效果了。
數字 2 的離場動畫就簡單多了 直接從 0 到 17px 就可以滾出去了。
至此整個點贊效果就完成了
以上就是vue transition實現點贊動畫效果的示例的詳細內容,更多關於vue transition實現點贊效果的資料請關注我們其它相關文章!