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 可以搜搜看哦
到這里就結束啦~ 應該就可以實現了.