本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画，分享给大家
如何实现这个动画？
效果分析
点`start`的时候，我们把整个动画拆分为两种效果（过渡和动画）。
1. 中间cd消失,下方播放条显示，这是属于`过渡`
2. `过渡`开始的同时，cd同时移动、放大、缩小到左下方播放条 ，这属于`动画`
上面的效果是【过渡】加【动画】同时使用完成的
对于第一种【过渡】，我们用vue中transition标签，加设置v-enter、v-leave-to、v-enter-active、v-leave-enter即可完成
对于第二种【动画】,我们就要用keyframe来完成了。
这里我们先完成第一种过渡
vue中模板节点
<template>
<div class="index">
<transition>
<div class="cd-box" ref="cdWrapper" v-show="fullScreen">
// CD图片 (动画的时候图片初始位置)
<img src="../assets/bj.png" alt="" class="bg">
</div>
</transition>
<button @click="switchMode" style="position:absolute;top:0;left:10px;">start</button>
<transition>
// 下面播放状态框
<div class="mini-player-box" v-show="!fullScreen">
// 状态看里面的图片 （动画的时候图片结束位置）
<div class="mini-img">
<img src="../assets/bj.png" alt="" >
</div>
</div>
</transition>
</div>
</template>结构很简单，基本就是
两个大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">
