当前位置：首页 > VUE

vue实现图标跳动

2026-03-29 17:44:58VUE

使用 CSS 动画实现图标跳动

在 Vue 中实现图标跳动效果可以通过 CSS 动画完成。以下是一个基于 transition 或 @keyframes 的实现方法。

安装依赖（如使用第三方图标库）

npm install @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

组件代码示例

vue实现图标跳动

<template>
  <div class="jumping-icon" @click="jump">
    <font-awesome-icon :icon="['fas', 'heart']" :class="{ 'animate': isJumping }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isJumping: false
    }
  },
  methods: {
    jump() {
      this.isJumping = true
      setTimeout(() => {
        this.isJumping = false
      }, 1000)
    }
  }
}
</script>

<style>
.jumping-icon {
  font-size: 2rem;
  cursor: pointer;
}

.animate {
  animation: jump 0.5s ease;
}

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

使用 GreenSock (GSAP) 实现高级动画

如需更复杂的跳动效果，可通过 GSAP 实现弹性动画。

安装 GSAP

vue实现图标跳动

npm install gsap

组件代码示例

<template>
  <div ref="icon" class="jumping-icon">
    <font-awesome-icon :icon="['fas', 'star']" />
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    this.$refs.icon.addEventListener('click', this.animateIcon)
  },
  methods: {
    animateIcon() {
      gsap.to(this.$refs.icon, {
        y: -30,
        duration: 0.3,
        ease: "bounce.out",
        yoyo: true,
        repeat: 1
      })
    }
  }
}
</script>

使用 Vue 过渡组件实现

通过 Vue 的 <transition> 组件结合 CSS 实现入场跳动效果。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <font-awesome-icon v-if="showIcon" :icon="['fas', 'bell']" />
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showIcon: true
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.transform = 'translateY(0)'
    },
    enter(el, done) {
      const timeline = gsap.timeline({
        onComplete: done
      })
      timeline.to(el, {
        y: -20,
        duration: 0.2
      }).to(el, {
        y: 0,
        duration: 0.3,
        ease: "elastic.out(1, 0.5)"
      })
    }
  }
}
</script>