在Vue中如何快速实现小球动画

在Vue中如何快速实现小球动画

 

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 )