当前位置：首页 > VUE

vue实现图标跳动

2026-02-17 17:36:29VUE

实现图标跳动效果的方法

在Vue中实现图标跳动效果，可以通过CSS动画或JavaScript动画库来实现。以下是几种常见的方法：

使用CSS动画

通过定义关键帧动画并应用到图标元素上：

<template>
  <div class="icon" :class="{ 'jump': isJumping }" @click="toggleJump">
    <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 ease;
}

.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="jump"></i>
  </transition>
</template>

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

<style>
.jump-enter-active {
  animation: jump 0.5s;
}
.jump-leave-active {
  animation: jump 0.5s reverse;
}
@keyframes jump {
  0% { transform: scale(1); }
  50% { transform: scale(1.2) translateY(-20px); }
  100% { transform: scale(1); }
}
</style>

使用GSAP动画库

vue实现图标跳动

对于更复杂的动画效果，可以使用GSAP库：

<template>
  <div ref="icon" class="icon">
    <i class="fas fa-bell"></i>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    this.animateIcon()
  },
  methods: {
    animateIcon() {
      gsap.to(this.$refs.icon, {
        y: -20,
        duration: 0.3,
        repeat: -1,
        yoyo: true,
        ease: "sine.inOut"
      })
    }
  }
}
</script>

响应式跳动效果

结合鼠标事件或数据变化触发动画：

vue实现图标跳动

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

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