Vue中使用create-keyframe-animation与动画钩子完成复杂动画

<template>
 <div class="index">
 <transition>
  <div class="cd-box" ref="cdWrapper" v-show="fullScreen">
 // CD图片 (动画的时候图片初始位置)
  <img src="/UploadFiles/2021-04-02/bj.png">

结构很简单，基本就是 两个大div ，然后把div的布局按效果图那些布置。
css部分（省略布局部分）


.cd-box
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s
 &.v-enter, &.v-leave-to
  opacity: 0
.mini-player-box
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s 
 &.v-enter, &.v-leave-to
  transform: translate3d(0, 40px, 0)
  opacity: 0 


这样在fullScreen变量改变的时候，就会触发【过渡】
这里我们完成第二种动画
首先安装插件 ， npm i create-keyframe-animation 这个插件是用js写css的keyframe动画用的，至于为什么keyframe不在css里面写呢？那是因为屏幕大小不一样，会导致需要移动的px不一样，所以要动态计算。
给 <transition> 添加动画钩子 


<transition 
  @enter="enter"
  @after-enter="afterEnter"
  @leave="leave"
  @after-leave="afterLeave"
 > 
  <div class="cd-box" ref="cdWrapper" v-show="fullScreen">
  <img src="/UploadFiles/2021-04-02/bj.png">

计算偏移量（中心点到中心的偏移,图中红线距离)
 


// 获得偏移量，以及scale
_getPosAndScale() {
 // 左下角图片的宽度
  const targetWidth = 40
 // cd宽度
  const width = 300
  const scale = targetWidth / width
  // 这里的 x,y要算，过程省略，无非就是加加减减，这的x，y都是算出来了的
  const x = -167.5
  const y = 497
  return {x ,y , scale}
 },


x,y的数值代表什么？见图
 
这里x为什么是负的，y是正的呢？
因为 浏览器的坐标系的中心点是在左上角 的，如图

那么动画从 cd中心到左下角，X偏移为负，y偏移为正
然后用animations插件执行动画钩子


 // enter是指当 cd从隐藏到显示的动画，
 enter(el, done) {
  const {x, y, scale} = this._getPosAndScale()

  let animation = {
  // 第0帧的时候，先让图片缩小，显示在右下角
  0: {
   transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
  },
  // 60%的时候，让图片回到cd中心，变大
  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'
  }
  })
//运行动画
 animations.runAnimation(this.$refs.cdWrapper, 'move', done)
 },
 afterEnter(){
 //运行完动画之后，注销掉动画
  animations.unregisterAnimation('move')
  this.$refs.cdWrapper.style.animation = ''
 },
 // leave是指 cd从显示到隐藏的动画
 leave(el, done) {
  this.$refs.cdWrapper.style.transition = 'all 0.4s'
  const {x, y, scale} = this._getPosAndScale()
  // 这里我们只要直接移动变小就可以了
  this.$refs.cdWrapper.style['transform'] = `translate3d(${x}px,${y}px,0) scale(${scale})`
   
 // 监听transitionend 事件在 CSS 完成过渡后触发done回调  
 this.$refs.cdWrapper.addEventListener('transitionend', () => {
  done()
  })
 },
 afterLeave() {
  this.$refs.cdWrapper.style.transition = ''
  this.$refs.cdWrapper.style['transform'] = ''
 }


写到这里，我们就把刚开始的效果给写完啦！
但在写js的keyframe的时候
我们还可以加上rotate，让动画效果有一个回弹效果


let animation = {
  0: {
   transform: `translate3d(${x}px, ${y}px, 0) scale(${scale}) rotate(0deg)`
  },
  60: {
   transform: `translate3d(0 ,0 , 0) scale(1.1) rotate(365deg)`
  },
  100: {
   transform: `translate3d(0 ,0 , 0) scale(1) rotate(360deg)`
  }
  }


所有源码


<template>
 <div class="index">
 <transition 
  @enter="enter"
  @after-enter="afterEnter"
  @leave="leave"
  @after-leave="afterLeave"
 > 
  <div class="cd-box" ref="cdWrapper" v-show="fullScreen">
  <img src="/UploadFiles/2021-04-02/bj.png">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        
        

            
上一篇：webpack4实现不同的导出类型
            
下一篇：基于three.js实现的3D粒子动效实例代码
        
        
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？