效果一覽

愛心效果

材料：愛心圖標(biāo)兩個(gè)，沒有我這種 icon 組件的用 png 圖片代替

<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
    <!-- 愛心圖標(biāo) -->
    <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>

因?yàn)樵邳c(diǎn)贊時(shí)有動(dòng)畫，取消點(diǎn)贊不要?jiǎng)赢?，所?transition 的 name 屬性需要根據(jù) isLike 變量變化，當(dāng) isLike 為 true 時(shí)，給他 zoom 動(dòng)畫，否則不給動(dòng)畫。動(dòng)畫模式是 out-in 即先出后進(jìn)。原來的圖標(biāo)先從大變小，然后新圖標(biāo)再?gòu)男∽兇蟆?/p>

這里注意當(dāng)兩個(gè)切換的組件名稱一致時(shí)，需要加 key 屬性，以區(qū)分兩個(gè)組件，否則動(dòng)畫不會(huì)生效

接下來寫 css

/** 動(dòng)畫進(jìn)行時(shí)的class **/
.zoom-enter-active, .zoom-leave-active {
    transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

/** 設(shè)置進(jìn)場(chǎng)開始的狀態(tài)和離場(chǎng)結(jié)束的狀態(tài)，都是縮放到0 **/
.zoom-enter, .zoom-leave-to {
    transform: scale(0);
}

/** 設(shè)置進(jìn)場(chǎng)結(jié)束的狀態(tài)和離場(chǎng)開始的狀態(tài), 都是縮放到1 **/
.zoom-enter-to, .zoom-leave {
    transform: scale(1);
}

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

因?yàn)槲覀冃枰诜糯髸r(shí)略微比 scale(1) 要大一點(diǎn)再回到正常大小，所以要自定義動(dòng)畫曲線 cubic-bezier(0.42, 0, 0.34, 1.55) 。這個(gè)曲線怎么來的呢？

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

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

在動(dòng)畫快結(jié)尾的時(shí)候，使曲線超出結(jié)束點(diǎn)即可。

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

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

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

1. 原來的愛心開始離場(chǎng)，此時(shí)原來愛心縮放狀態(tài)為 1，即大小的 100%
2. 愛心離場(chǎng)動(dòng)畫進(jìn)行中，此時(shí)開始從 1 縮放到 0，即大小的 0%
3. 原愛心離場(chǎng)完成，新愛心開始進(jìn)場(chǎng)，此時(shí)新愛心縮放狀態(tài)為 0
4. 新愛心進(jìn)場(chǎng)動(dòng)畫進(jìn)行中，此時(shí)開始從 0 動(dòng)畫縮放到結(jié)束狀態(tài) 1
   

當(dāng)取消點(diǎn)贊的時(shí)候，isLike 為 false，transition 的 name 就等于空字符串，此時(shí)就不會(huì)有動(dòng)畫了。

數(shù)字滾動(dòng)動(dòng)畫

因?yàn)橹皇菙?shù)字的變化，因此 transition 里只需要一個(gè) div 即可。只是要注意 div 設(shè)置 key，以標(biāo)識(shí)數(shù)據(jù)變動(dòng)。

<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)榱撕糜?jì)算上下滾動(dòng)的距離，所以需要把數(shù)字的高度定死在 17px，接下來寫 transition 的動(dòng)畫 class。我們通過點(diǎn)贊狀態(tài)來判斷應(yīng)該用那一套動(dòng)畫，點(diǎn)贊時(shí) transition 的 name 是 plus ，取消點(diǎn)贊時(shí)是 minus 。

// 點(diǎn)贊數(shù)字+1動(dòng)畫
.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);
}

// 點(diǎn)贊數(shù)字-1動(dòng)畫
.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);
}

點(diǎn)贊動(dòng)畫

點(diǎn)贊動(dòng)畫很簡(jiǎn)單，在點(diǎn)贊時(shí)會(huì)在老的數(shù)字div下面生成一個(gè)新數(shù)字div。此時(shí)只需要讓他們都往上移動(dòng) 17px 即可。

因?yàn)槿∠c(diǎn)贊是數(shù)字從上往下滾動(dòng)，所以需要讓數(shù)字 1 的初始位置在 2 上面。所以寫出如下代碼，設(shè)定數(shù)字 1 的動(dòng)畫初始位置

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

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

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

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

至此整個(gè)點(diǎn)贊效果就完成了

以上就是Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例的詳細(xì)內(nèi)容，更多關(guān)于vue transition實(shí)現(xiàn)點(diǎn)贊效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論