CSS + JS + Vue 实现收藏动画

在移动端 H5 页面中，经常会见到收藏或点赞时出现的动画效果。通常这些动画会包括放大、缩小、弹跳等元素。以下是一个使用 Vue.js、CSS 和 JavaScript 来实现收藏动画的简单示例。

Vue 组件

创建一个名为 FavoriteAnimation.vue 的组件：

<template>
  <div class="favorite-container">
    <button @click="toggleFavorite" :class="{ 'is-favorite': isFavorite, 'animate-favorite': animate }">
      ♥
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFavorite: false,
      animate: false,
    };
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      this.animate = true;
      setTimeout(() => {
        this.animate = false;
      }, 300);
    },
  },
};
</script>

<style scoped>
.favorite-container {
  position: relative;
}

button {
  font-size: 24px;
  transition: transform 0.3s ease-out;
  color: grey;
}

button.is-favorite {
  color: red;
}

button.animate-favorite {
  transform: scale(1.3);
}
</style>

功能解释

1. 数据和状态: 我们有两个数据属性 —— isFavorite 用于表示当前是否已收藏，animate 用于控制动画的触发。

2. 切换收藏状态: 我们定义了一个 toggleFavorite 方法，用于切换收藏状态，并触发动画效果。

3. 动画效果: 我们使用 CSS 的 transform 和 transition 属性来实现动画。当用户点击按钮时，按钮会放大（scale 1.3倍）然后缩回原大小。

4. 动画时长和延迟: 我们使用 setTimeout 函数来移除动画类，以便动画只播放一次。

5. 样式: 我们使用简单的 CSS 来实现样式。当项目被收藏时，心形图标会变为红色。

这个组件实现了一个基础的收藏动画功能，并适用于移动端 H5 页面。你可以根据需要进行更多的定制和扩展。希望这个简单的示例能帮助你实现你需要的功能！