对于我们来说,vue transition 使用起来是很简单的,自己可以去官网看就会了
我们重点关注js 钩子
我们重点关注 js 钩子动画
CartAnim.vue
<template>
<div class="ball-wrap">
<transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<div class="ball" v-show="show" :style="pos">
<div class="inner">
<div class="cubeic-add"></div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "cartAnim",
data() {
return { show: false };
},
props: ["pos"],
methods: {
start(el) {
// 启动动画接口,传递点击按钮元素
this.el = el;
// 使.ball显示,激活动画钩子
this.show = true;
},
beforeEnter(el) {
// 把小球移动到点击的dom元素所