vue

使用Vue transition 实现点赞动画效果

小云
347
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
看了该问题的人还看了