1. 在自己的页面中有做好相应的测试位置
2. 然后给小球添加属性 v-show并且添加相应的数据(false)
3.点击购物车 让 false = true;
4.然后到重点了; 用 transition的标签 把要运动的小球包起来
<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'> 小球 </transition>
5.在 methods 里 定义你上面写的方法:
beforeEnter(el) {
el.style.transform = ' translate( 0,0 )'
},
enter(el,done) {
el.offsetWidth;
el.style.transform = 'translate( 0,0 ) [ 这里写的是终点位置 , 上面是起始位置 ]
el.style.transition = 'all' 1s ease' ;
},
afterEnter(el){
this.ballFlag = !this.ballFlag; [ 这里的ballFlag是 一个自己设定变量 true,或者 false ]
}
6.这里 要在第五步的时候 把小球 的最终落点定好, 直接添加在第五步的 enter函数中;
这里有个好玩的页面是 设计 球的运动轨迹的; 叫 cubic-bezier 可以搜搜看哦
到这里就结束啦~ 应该就可以实现了.