vue項目中簡單使用create-keyframe-animation插件

1.安裝

npm i create-keyframe-animation

2.導入

import animations from 'create-keyframe-animation'

3.在transition的enter或leave鉤子函數中使用

// 定義動畫內容
      const animation = { 
 
   
        0: { 
 
   
          transform: `translate3d(${ 
     x}px,${ 
     y}px,0) scale(${ 
     scale})`
        },
        60: { 
 
   
          transform: 'translate3d(0,0,0) scale(1.1)'
        },
        100: { 
 
   
          transform: 'translate3d(0,0,0) scale(1)'
        }
      }
      // 註冊動畫
      animations.registerAnimation({ 
 
   
        name: 'move', // 動畫名稱
        animation, // 動畫
        presets: { 
 
    // 預設項
          duration: 400, // 持續時間
          easing: 'linear' // 時間函數
        }
      })
      // 運行動畫。第一個參數，dom。第二個是動畫名，第三個是動畫執行完的回調函數，這裏使用enter鉤子函數第二個默認參數done
      animations.runAnimation(this.$refs.cdWrapper, 'move', done)

4.在after-enter或after-leave中註銷動畫

animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''

本文分享 CSDN - 冬天愛吃冰淇淋。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。