Vue transition實現點贊動畫效果的示例

Posted on by

效果一覽

愛心效果

材料：愛心圖標兩個，沒有我這種 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 屬性需要根據 isLike 變量變化，當 isLike 為 true 時，給他 zoom 動畫，否則不給動畫。動畫模式是 out-in 即先出後進。原來的圖標先從大變小，然後新圖標再從小變大。

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

接下來寫 css

/** 動畫進行時的class **/
.zoom-enter-active, .zoom-leave-active {
    transition: all .15s cubic-bezier(0.42, 0, 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, 0, 0.34, 1.55) 。這個曲線怎麼來的呢？

打開 chrome 的調試面板，隨便找個 dom 設置 transition-timing-function: ease; 然後點擊 ease 旁邊的曲線小圖標

拖動拉桿就可以調整曲線

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

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

更多關於動畫時間曲線的知識，這裡就不贅述瞭，網上有很多相關知識。

關於縮放部分，按照上述 css 設定以及 mode="out-in" 動畫模式是先出後進，在點贊時。

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

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

數字滾動動畫

因為隻是數字的變化，因此 transition 裡隻需要一個 div 即可。隻是要註意 div 設置 key，以標識數據變動。

<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;
    }
  }

需要註意我們為瞭好計算上下滾動的距離，所以需要把數字的高度定死在 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 即可。

因為取消點贊是數字從上往下滾動，所以需要讓數字 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實現點贊效果的資料請關註WalkonNet其它相關文章！

推薦閱讀：