在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 )                   [ 這里寫的是終點位置 , 上面是起始位置 ]

  el.style.transition = 'all' 1s ease' ;

},

afterEnter(el){

  this.ballFlag = !this.ballFlag;                             [ 這里的ballFlag是 一個自己設定變量 true,或者 false ]

 

6.這里 要在第五步的時候 把小球 的最終落點定好,  直接添加在第五步的  enter函數中;

 

 

這里有個好玩的頁面是 設計 球的運動軌跡的;     叫   cubic-bezier   可以搜搜看哦

 

 

到這里就結束啦~   應該就可以實現了.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM