vue实现图片跳动
实现图片跳动的 Vue 方法
方法一：使用 CSS 动画结合 Vue 动态类名
通过 Vue 绑定动态类名，触发 CSS 定义的跳动动画效果。
<template>
<img
:class="{ 'jump-animation': isJumping }"
src="your-image-path.jpg"
@click="toggleJump"
>
</template>
<script>
export default {
data() {
return {
isJumping: false
}
},
methods: {
toggleJump() {
this.isJumping = true;
setTimeout(() => {
this.isJumping = false;
}, 1000); // 动画持续时间
}
}
}
</script>
<style>
.jump-animation {
animation: jump 0.5s ease-in-out;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
</style>方法二：使用 Vue Transition 组件
利用 Vue 的内置过渡系统实现更复杂的动画效果。
<template>
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<img v-show="show" src="your-image-path.jpg">
</transition>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
beforeEnter(el) {
el.style.transform = 'translateY(0)';
},
enter(el, done) {
let y = 0;
const jump = () => {
y += 10;
el.style.transform = `translateY(${y % 20 === 0 ? -y : y}px)`;
if (y < 100) {
requestAnimationFrame(jump);
} else {
done();
}
};
jump();
},
leave(el, done) {
// 可选的离开动画
done();
}
}
}
</script>方法三：使用第三方动画库（如 Anime.js）
集成专业动画库实现更丰富的跳动效果。
<template>
<img ref="jumpImage" src="your-image-path.jpg" @click="jump">
</template>
<script>
import anime from 'animejs';
export default {
methods: {
jump() {
anime({
targets: this.$refs.jumpImage,
translateY: [-20, 0],
duration: 800,
elasticity: 600,
loop: 2
});
}
}
}
</script>关键实现要点
- 动画流畅性：优先使用 CSS 硬件加速属性（如
transform），避免使用top/left等属性 - 性能优化：复杂动画建议使用
requestAnimationFrame - 交互设计：通常通过点击或悬停事件触发动画
- 移动端适配：注意添加
will-change: transform提升移动端性能
以上方法可根据实际需求选择，CSS 动画适合简单效果，Vue Transition 提供更多控制，第三方库则能实现专业级动画。
