当前位置：首页 > VUE

vue实现图标跳动

2026-01-17 01:06:36VUE

实现图标跳动的几种方法

在Vue中实现图标跳动效果可以通过CSS动画、第三方动画库或JavaScript动态控制样式。以下是几种常见实现方式：

CSS关键帧动画

通过@keyframes定义跳动动画，结合Vue的v-bind:class或内联样式触发：

<template>
  <div class="icon" :class="{ 'jump': isJumping }" @click="toggleJump">
    <!-- 图标内容（字体图标或SVG） -->
    <i class="fas fa-heart"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isJumping: false
    }
  },
  methods: {
    toggleJump() {
      this.isJumping = !this.isJumping;
    }
  }
}
</script>

<style>
.icon {
  font-size: 2rem;
  transition: transform 0.3s;
}

.jump {
  animation: jump 0.5s ease infinite;
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
</style>

使用Vue过渡动画

结合Vue的<transition>组件实现条件触发的跳动：

<template>
  <transition name="jump">
    <i class="fas fa-star" v-if="showIcon" @click="bounce"></i>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showIcon: true
    }
  },
  methods: {
    bounce() {
      this.showIcon = false;
      setTimeout(() => this.showIcon = true, 10);
    }
  }
}
</script>

<style>
.jump-enter-active {
  animation: jump 0.5s;
}
.jump-leave-active {
  display: none;
}
</style>

动态绑定样式

通过计算属性动态计算transform值：

<template>
  <i 
    class="fas fa-bell"
    :style="{ transform: `translateY(${offset}px)` }"
    @mouseover="startJump"
    @mouseleave="stopJump"
  ></i>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      jumpInterval: null
    }
  },
  methods: {
    startJump() {
      let direction = 1;
      this.jumpInterval = setInterval(() => {
        this.offset += direction * 2;
        if (Math.abs(this.offset) >= 10) direction *= -1;
      }, 50);
    },
    stopJump() {
      clearInterval(this.jumpInterval);
      this.offset = 0;
    }
  }
}
</script>

使用第三方库（如Animate.css）

集成动画库快速实现效果：

安装Animate.css：
```
npm install animate.css
```

在Vue组件中使用：


<template>
<i 
 class="fas fa-rocket animate__animated"
 :class="{ 'animate__bounce': isBouncing }"
 @click="isBouncing = true"
 @animationend="isBouncing = false"
></i>
</template>

import 'animate.css'; export default { data() { return { isBouncing: false } } } ```