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源创计划”，欢迎正在阅读的你也加入，一块儿分享。