亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

使用Vue transition 實現點贊動畫效果

vue
小云
258
2023-09-21 11:40:37
欄目: 編程語言

要實現點贊動畫效果,你可以使用Vue的過渡(transition)組件。下面是一個簡單的示例代碼:

<template>

  <div>

    <button @click="like" :disabled="liked">點贊</button>

    <transition name="fade">

      <span v-if="liked" class="heart">??</span>

    </transition>

  </div>

</template>

<script>

export default {

  data() {

    return {

      liked: false

    };

  },

  methods: {

    like() {

      this.liked = true;

      setTimeout(() => {

        this.liked = false;

      }, 2000); // 這里設置2秒后取消點贊狀態,可以根據需要調整時間

    }

  }

};

</script>

<style scoped>

.fade-enter-active,

.fade-leave-active {

  transition: opacity 0.5s;

}

.fade-enter,

.fade-leave-to {

  opacity: 0;

}

.heart {

  font-size: 24px;

  color: red;

}

</style>

在上面的代碼中,我們使用了Vue的<transition>組件來包裹一個<span>元素,這個元素用來展示點贊的圖標(這里使用了一個愛心圖標)。當點擊“點贊”按鈕時,我們通過改變liked屬性的值來顯示或隱藏這個<span>元素,從而觸發過渡效果。

為了實現淡入淡出的過渡效果,我們給<span>元素添加了一個CSS類名fade,并定義了相應的過渡樣式。在這個例子中,我們將opacity屬性作為過渡屬性,并設置了0.5秒的過渡時間。

請注意,在代碼中使用了setTimeout函數來模擬點贊后取消點贊的延遲效果。你可以根據需要調整延遲時間。

通過上述代碼,當點擊“點贊”按鈕時,點贊圖標會以淡入淡出的動畫效果顯示出來,然后在2秒后自動隱藏。

0
天气| 满洲里市| 南川市| 西林县| 深水埗区| 乐东| 台东县| 葵青区| 佛冈县| 洪江市| 永定县| 进贤县| 都兰县| 河池市| 方正县| 札达县| 南乐县| 邢台市| 孝感市| 玉门市| 博野县| 凌海市| 茶陵县| 那曲县| 洛川县| 清水县| 宣威市| 海南省| 隆回县| 诏安县| 沂南县| 依安县| 辽阳县| 辽中县| 隆子县| 镇康县| 宁国市| 襄垣县| 丁青县| 吴江市| 晴隆县|