vue实现图标跳动
实现图标跳动的几种方法
在Vue中实现图标跳动效果可以通过CSS动画、JavaScript或第三方动画库完成。以下是几种常见的实现方式：
CSS动画实现
通过@keyframes定义跳动动画，并应用到图标元素上：
<template>
<div class="jumping-icon">🎯</div>
</template>
<style>
.jumping-icon {
animation: jump 0.5s infinite alternate;
font-size: 2rem;
}
@keyframes jump {
from {
transform: translateY(0);
}
to {
transform: translateY(-10px);
}
}
</style>使用Vue的过渡动画
结合Vue的transition组件和CSS过渡效果：
<template>
<transition name="jump">
<div v-if="showIcon" class="icon">⭐</div>
</transition>
</template>
<script>
export default {
data() {
return {
showIcon: true
}
},
mounted() {
setInterval(() => {
this.showIcon = !this.showIcon
}, 500)
}
}
</script>
<style>
.jump-enter-active, .jump-leave-active {
transition: all 0.3s;
}
.jump-enter, .jump-leave-to {
transform: translateY(-10px);
}
</style>使用GSAP动画库
安装GSAP后创建更复杂的跳动效果：
npm install gsap<template>
<div ref="icon" class="icon">🦄</div>
</template>
<script>
import { gsap } from 'gsap'
export default {
mounted() {
gsap.to(this.$refs.icon, {
y: -20,
duration: 0.5,
repeat: -1,
yoyo: true,
ease: "power1.inOut"
})
}
}
</script>使用Animate.css库
结合流行的动画库快速实现效果：
<template>
<div class="icon animate__animated animate__bounce animate__infinite">🐶</div>
</template>
<script>
import 'animate.css'
export default {
// 组件代码
}
</script>响应式跳动效果
根据数据变化触发跳动：
<template>
<div
:class="{'jumping': shouldJump}"
@click="triggerJump"
>
🏓
</div>
</template>
<script>
export default {
data() {
return {
shouldJump: false
}
},
methods: {
triggerJump() {
this.shouldJump = true
setTimeout(() => {
this.shouldJump = false
}, 1000)
}
}
}
</script>
<style>
.jumping {
animation: jump 0.3s 3;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
</style>以上方法可以根据具体需求选择使用，CSS动画适合简单效果，GSAP适合复杂动画，而Animate.css则适合快速实现预定义动画效果。
