使用cube-ui的create-api,制作小球抛物线动画,动画结束后小球自动销毁。讲述先欠着,有时间再补,先上效果:
代码实现:
首先,ball 组件,需要两层,内层水平线性移动,外层垂直贝塞尔曲线运动,实现抛物线效果。
组件模板部分:
<template>
<transition name="ball"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop"
>
<div class="ball" v-show="btnShow">
<div class="inner"></div>
</div>
</transition>
</template>
js部分:
export default {
name: 'Ball',
data () {
return {
btnShow: false,
startPos: {
},
stopPos: {
}
}
},
methods: {
// 对外接口
drop (startPos, stopPos) {
this.btnShow = !this.btnShow
this.startPos = startPos
this.stopPos = stopPos
},
bef