欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue transition實現(xiàn)點贊動畫效果的示例

 更新時間:2021年05月12日 14:52:03   作者:七分小熊貓  
點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動

效果一覽

愛心效果

材料:愛心圖標兩個,沒有我這種 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 變量變化,當 isLiketrue 時,給他 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é)束點即可。

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

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

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

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

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

數(shù)字滾動動畫

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

<div class="like-num-wrapper">
    <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;
    }
  }

需要注意我們?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)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vuex中actions優(yōu)雅處理接口請求的方法

    Vuex中actions優(yōu)雅處理接口請求的方法

    在項目開發(fā)中,如果使用到了 vuex,通常我會將所有的接口請求單獨用一個文件管理,這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請求,業(yè)務(wù)邏輯寫在 actions 中,本文給大家分享完整流程需要的朋友可以參考下
    2022-11-11
  • element-ui 插槽自定義樣式居中效果實現(xiàn)思路

    element-ui 插槽自定義樣式居中效果實現(xiàn)思路

    這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實現(xiàn)思路是通過template標簽可理解為一個內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下
    2024-07-07
  • vue實現(xiàn)打包添加二級目錄

    vue實現(xiàn)打包添加二級目錄

    這篇文章主要介紹了vue實現(xiàn)打包添加二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue動態(tài)添加store、路由和國際化配置方式

    vue動態(tài)添加store、路由和國際化配置方式

    這篇文章主要介紹了vue動態(tài)添加store、路由和國際化配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue按時間段查詢數(shù)據(jù)組件使用詳解

    Vue按時間段查詢數(shù)據(jù)組件使用詳解

    這篇文章主要為大家詳細介紹了Vue按時間段查詢數(shù)據(jù)組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • vue使用Office?Web實現(xiàn)線上文件預(yù)覽

    vue使用Office?Web實現(xiàn)線上文件預(yù)覽

    這篇文章主要為大家介紹了vue使用微軟的開發(fā)接口Office?Web,實現(xiàn)線上文件預(yù)覽,預(yù)覽word,excel,pptx,pdf文件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • vue3 數(shù)組清空與重新賦值的操作代碼

    vue3 數(shù)組清空與重新賦值的操作代碼

    這篇文章主要介紹了vue3 數(shù)組清空與重新賦值的操作代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • vue之父子組件間通信實例講解(props、$ref、$emit)

    vue之父子組件間通信實例講解(props、$ref、$emit)

    組件間如何通信,也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點,來講解如何實現(xiàn)父子組件間通信。
    2018-05-05
  • vue實現(xiàn)多條件和模糊搜索功能

    vue實現(xiàn)多條件和模糊搜索功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)多條件和模糊搜索功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • Vue extend的基本用法(實例詳解)

    Vue extend的基本用法(實例詳解)

    這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12

最新評論