当前位置：首页 > VUE

vue实现图片跳动

2026-02-19 18:43:07VUE

实现图片跳动效果的方法

在Vue中实现图片跳动效果可以通过CSS动画或JavaScript动态样式控制。以下是两种常见的实现方式：

使用CSS动画实现

在Vue组件的<style>部分定义关键帧动画，并通过类绑定控制动画播放：

<template>
  <img 
    src="your-image.jpg" 
    :class="{ 'jump-animation': isJumping }" 
    @click="toggleJump"
  >
</template>

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

<style scoped>
.jump-animation {
  animation: jump 0.5s ease infinite alternate;
}

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

使用JavaScript动态样式

通过绑定内联样式实现更灵活的控制：

<template>
  <img 
    src="your-image.jpg" 
    :style="jumpStyle" 
    @mouseover="startJump"
    @mouseleave="stopJump"
  >
</template>

<script>
export default {
  data() {
    return {
      jumpHeight: 0,
      animationInterval: null
    }
  },
  computed: {
    jumpStyle() {
      return {
        transform: `translateY(${-this.jumpHeight}px)`,
        transition: 'transform 0.2s ease'
      }
    }
  },
  methods: {
    startJump() {
      let direction = 1
      this.animationInterval = setInterval(() => {
        if (this.jumpHeight >= 20) direction = -1
        if (this.jumpHeight <= 0) direction = 1
        this.jumpHeight += 2 * direction
      }, 50)
    },
    stopJump() {
      clearInterval(this.animationInterval)
      this.jumpHeight = 0
    }
  },
  beforeUnmount() {
    clearInterval(this.animationInterval)
  }
}
</script>

使用第三方动画库

安装animate.css库可以快速实现更多动画效果：

npm install animate.css

在Vue组件中使用：

<template>
  <img 
    src="your-image.jpg" 
    class="animate__animated" 
    :class="{'animate__bounce': isBouncing}"
    @click="isBouncing = !isBouncing"
  >
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      isBouncing: false
    }
  }
}
</script>