vue实现小球弹入
Vue 实现小球弹入动画
使用 Vue 实现小球弹入动画可以通过 CSS 过渡或动画结合 Vue 的动态绑定特性完成。以下是几种常见方法：
方法一：使用 Vue 过渡和 CSS 动画
通过 Vue 的 <transition> 组件和 CSS 动画实现小球弹入效果。
<template>
<button @click="showBall = !showBall">Toggle Ball</button>
<transition name="bounce">
<div v-if="showBall" class="ball"></div>
</transition>
</template>
<script>
export default {
data() {
return {
showBall: false
}
}
}
</script>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #42b983;
border-radius: 50%;
margin: 20px auto;
}
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>方法二：结合动态样式绑定
通过 Vue 的动态样式绑定实现更灵活的控制。
<template>
<button @click="animate">Animate Ball</button>
<div
class="ball"
:style="{
transform: `scale(${scale})`,
transition: 'transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)'
}"
></div>
</template>
<script>
export default {
data() {
return {
scale: 0
}
},
methods: {
animate() {
this.scale = 0;
setTimeout(() => {
this.scale = 1.2;
setTimeout(() => {
this.scale = 1;
}, 250);
}, 10);
}
}
}
</script>方法三：使用第三方动画库
借助第三方动画库如 anime.js 或 gsap 实现更复杂的弹跳效果。
<template>
<button @click="animate">Animate with GSAP</button>
<div ref="ball" class="ball"></div>
</template>
<script>
import { gsap } from 'gsap';
export default {
methods: {
animate() {
gsap.from(this.$refs.ball, {
duration: 0.5,
scale: 0,
ease: "elastic.out(1, 0.5)"
});
}
}
}
</script>关键点说明
- 使用 CSS 的
transform属性实现缩放动画 - 弹性效果可以通过
cubic-bezier或elastic缓动函数实现 - 动画时序控制通过 JavaScript 的
setTimeout或动画库完成 - 对于复杂动画，推荐使用专业动画库如 GSAP
以上方法均可实现小球弹入效果，选择取决于项目需求和动画复杂度。CSS 方案适合简单动画，而 GSAP 等库更适合复杂交互场景。
