首頁技術(shù)文章正文

Web前端培訓(xùn):Vue結(jié)合Velocity.js實(shí)現(xiàn)動(dòng)畫

更新時(shí)間:2022-09-28 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  Velocity.js是一個(gè)簡單易用、高性能且功能豐富的輕量級(jí)JavaScript動(dòng)畫庫,它擁有顏色動(dòng)畫、轉(zhuǎn)換動(dòng)畫(transform)、循環(huán)、緩動(dòng)、SVG動(dòng)畫和滾動(dòng)動(dòng)畫等特色功能。它支持Chaining鏈?zhǔn)絼?dòng)畫,當(dāng)一個(gè)元素連續(xù)應(yīng)用多個(gè)velocity()時(shí),動(dòng)畫以列隊(duì)方式執(zhí)行。

  接下來我們通過例4-5講解如何使用Vue結(jié)合Velocity.js庫實(shí)現(xiàn)動(dòng)畫效果。

  【例4-5】

  (1)獲取velocity.min.js文件,保存到chapter04目錄中。

  (2)創(chuàng)建C:\vue\chapter04\demo05.html文件,引入velocity.min.js,如下所示:

<script src="velocity.min.js"></script>

  (3)在demo05.html文件中編寫HTML結(jié)構(gòu),具體代碼如下:

<div id="app">
  <button @click="show=!show">動(dòng)畫效果</button>
  <transition @before-enter="beforeEnter" @enter="enter"
   @leave="leave" v-bind:css="false">
    <p v-if="show">文字動(dòng)畫效果</p>
  </transition>
</div>

  在上述代碼中,第3~4行給標(biāo)簽添加了beforeEnter和enter兩個(gè)入場動(dòng)畫函數(shù),和一個(gè)leave出場動(dòng)畫函數(shù)。

  (4)在demo05.html文件中編寫JavaScript代碼,具體代碼如下:

var vm = new Vue({
    el: '#app',
    data: {
        show: false,
    },
methods: {
  beforeEnter (el) {
      el.style.opacity = 0                  // 透明度為0
      el.style.transformOrigin = 'left'     // 設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置
      el.style.color = 'red'                // 顏色為紅色
  },
  enter (el, done) {
      Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                                                   // duration為動(dòng)畫執(zhí)行時(shí)間
      Velocity(el, {fontSize: 'lem'}, {complete: done})
  },
  leave (el, done) {
    Velocity(el, {translateX: '15px', rotateZ: '50deg'},
     {duration: 3000})
    Velocity(el, {rotateZ: '1000deg'}, {loop: 2})
    Velocity(el, {rotateZ: '45deg', translateY: '30px',
     translateX: '30px', opacity: 0}, {complete: done})
   }
  }
})

  上述代碼演示了利用Velocity.js庫實(shí)現(xiàn)動(dòng)畫效果,其中,第12~22行調(diào)用了Velocity()函數(shù),該函數(shù)的第1個(gè)參數(shù)是DOM元素,第2個(gè)參數(shù)用來傳入CSS參數(shù)列表,第3個(gè)參數(shù)表示動(dòng)畫的配置項(xiàng)。

  (5)在瀏覽器中打開demo05.html,觀察動(dòng)畫效果是否生效。

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!