vue 2.0 + 如何实现加入购物车，小球飞入的动画

#vue 2.0 + 如何实现加入购物车，小球飞入的动画| 来源: 网络整理| 查看: 265

github源码地址：https://github.com/13476075014/node-vue/tree/master/mynodeproject/13.sell/sell 在移动端经常会有加入购物车，小球飞入的动画效果，具体如下图，图片略微拙劣，我自己截自己写的小效果的，，，

一：小球的html代码如下：

* 小球用的 transition标签包住的，在上面写上vue的javascript动画生命钩子

　　v-on:before-enter="beforeEnter" （动画进入前）

　 v-on:enter="enter"（动画进入时）

　 v-on:after-enter="afterEnter" （动画进入完后）

二：js部分

　　2.1 在data里面加上小球的数据，这里准备了比较多的，可以在有人点着玩的时候，很快速的点也尽量不出现bug:

export default { name:"goods", data(){ return { ......， //别的数据 balls:[//小球 {show:false,index:0}, {show:false,index:1}, {show:false,index:2}, {show:false,index:3}, {show:false,index:4}, {show:false,index:5}, {show:false,index:6}, {show:false,index:7}, {show:false,index:8}, {show:false,index:9}, {show:false,index:10}, {show:false,index:11} ], dropBall:[] //已经在下降的小球存在这里 } }

　　2.2 在methods 中写入加入购物车的加号点击时候的小球部分的方法，把点击的元素存在data的balls中，便于后面获取其位置，把小球展示出来：

methods:{ ...... //别的一些方法， drop(el){//小球动画方法,el就是加号按钮元素 for(var i=0;i

【本文地址】

公司简介

联系我们