本文主要介绍使用Vue中的create-key-animation和animation hooks来完成复杂的动画，并分享给大家

这个动画怎么实现？

效果分析

当我们单击“开始”时，我们将整个动画分成两种效果(过渡和动画)。

1.中间的cd消失了，下面的播放条显示它属于“过渡”

2.“转场”开始时，cd同时向左下角播放条移动、放大、缩小，属于“动画”

以上效果是通过同时使用[过渡]和[动画]实现的

对于第一种“过渡”，我们可以使用vue中的过渡标签，设置v-enter、v-leave-to、v-enter-active和v-leave-enter。对于第二种“动画”，我们将使用关键帧来完成它。这里我们先完成第一个过渡

vue中的模板节点

模板div class=' index '过渡div class=' CD-box' ref=' CD包装器' v-show='全屏'//CD图片(动画期间图片的初始位置)img src=' http 3360./assets/bj . png ' alt=' class=' BG '/div/transition button @ click=' SwitCh MOde ' style=' position 3360 absolute；top:0' left:10px'在开始/按钮转换//播放状态框div class=' mini-player-box ' v-show='下！看全屏'//状态的图片(动画时图片结束的地方)。div class=' mini-img ' img src=' http :/assets/bj . png ' alt=' '/div/div/transition/div/模板结构很简单，基本上就是两个大的div，然后根据渲染图来安排div的布局。

Css部分(省略布局部分)。cd盒。v-回车-激活，v-leave-active transit :所有0.4s。v-输入，v-leave-to opa city 3360 0 .迷你播放器盒。v-回车-激活，v-离开-激活转换： all 0.4s . v-进入，v-leave-to transform : translate 3d(0，40px，0)opa city 3360 0，当fullScreen变量发生变化时会触发[transition]。

这里我们完成第二个动画

首先，安装插件。npm i create-keyframe-animation用于在js中编写css的关键帧动画。为什么关键帧不是用css写的？那是因为不同的屏幕尺寸会导致不同的PXs被移动，所以需要动态计算。

向过渡添加动画挂钩

transition @ enter=' enter ' @ after-enter=' after enter ' @ left=' leave ' @ after-leave=' after leave ' div class=' CD-box ' ref=' cdWrapper ' v-show=' full screen ' img Src=' http :/assets/bj . png ' alt=' class=' BG '/div/transition计算偏移量(中心到中心偏移量，图中红线距离)

//获取offset和scale_getPosAndScale() {//左下角图片的宽度const target width=40//CD width const width=300 const scale=target width/width//其中x和y是计数的，过程省略。无非就是加、减、减，其中x和y是计算出来的const x=-167.5 const y=497 return { x，y，scale}}，x和y的值代表什么？见图

为什么这里x是负的，y是正的？

因为浏览器坐标系的中心点在左上角，如图所示

然后从cd的中心到左下角，X偏移为负，Y偏移为正

然后使用动画插件来执行动画挂钩

//输入是指当激光唱片从隐藏到显示的动画，输入(el，done) { const {x，y，scale}=这个._getPosAndScale()让动画={ //第0帧的时候，先让图片缩小，显示在右下角0: { transform : ` translate 3d($ { x } px，${y}px，0)刻度(${scale})` }，//60%的时候，让图片回到激光唱片中心，变大60: { transform : ` translate 3d(0，0，0)刻度(1.1)` },//变回原来的尺寸，会有一个回弹的效果100: { transform : ` translate 3d(0，0，0) scale(1)` } } //动画的一些配置动画。注册动画({ name: 'move '，动画，presets: { duration: 400，eas : ' linear ' })//运行动画动画。运行动画（这$refs.cdWrapper，' move '，done) }，afterEnter(){ //运行完动画之后，注销掉动画动画。取消注册动画("移动")这个参考文献。cdwrapper。风格。动画=' ' }，//离开是指激光唱片从显示到隐藏的动画离开（埃尔，完成){这个参考文献。cdwrapper。风格。过渡='所有0.4s '常量{ x，y，scale}=这个._getPosAndScale() //这里我们只要直接移动变小就可以了这个参考文献。cdwrapper。style[' transform ']=' translate 3d($ { x } px，${y}px，0) scale(${scale})` //监听过渡和事件在半铸钢钢性铸铁(铸造半钢)完成过渡后触发完成的回调这个参考文献。cdwrapper。addevent listener(' transitionend '，()={ done() }) }，afterLeave() { this .参考文献。CDwrapper。风格。过渡='这个.参考文献。CDwrapper。style[' transform ']=' ' }写到这里，我们就把刚开始的效果给写完啦！

但在写射流研究…的键架的时候

我们还可以加上旋转，让动画效果有一个回弹效果

让动画={ 0: { translate : ` translate 3d($ { x } px，${y}px，0)比例(${scale})旋转(0deg)` }，60: { translate : ` translate 3d(0，0，0)比例(1.1)旋转(365 )`}，100: { translate : ` translate 3d(0，0，0)比例(1)旋转(1所有源码

template div class=' index ' transition @ enter=' enter ' @ after-enter=' after enter ' @ leave=' leave ' @ after-leave=' after leave ' div class=' CD-box ' ref=' cdWrapper ' v-show='全屏' img src=' http :/资产/bj。png ' alt=' class=' BG '/div/transition button @ click=' SwitCh MOde ' style=' position 3360 absolute；top:0' left:10px '开始/按钮转换div class='mini-box' v-show='！全屏div class=' mini-img ' img src=' http :/资产/bj。png ' alt=' '/div/div/transition/div/模板脚本/* ESL int-disable */从“创建-关键帧-动画”导入动画导出默认{ components: {}，props: { }，data(){ return {全屏： true } }，computed: {}，watch: {}，created() {}，mount(){//const { x，y，scale}=this ._getPosAndScale() console.log(这. getPosAndScale()) console.log(动画)}，方法： { switch mode(){ this。全屏=！this.fullScreen }，_ getPosAndScale(){ const target width=40 const padding left=20 const padding bottom=20 const padding top=0 const width=300 const scale=target width/width const x=-(窗口)。内部宽度/2-左填充)常量y=窗口。内部高度-填充顶部-填充底部-宽度/2返回{ x，y，scale} }，输入(el，done) { const {x，y，scale}=this_getPosAndScale()让动画={ 0: { translate : ` translate 3d($ { x } px，${y}px，0)缩放(${scale})旋转(0度)`}，60: { translate : ` translate 3d(0，0，0)缩放(1.1)旋转(365度)`}，100: { translate 3360 ` translate 3d(0，0，0)$refs.cdWrapper，' move '，done) }，在enter(){ animations之后。取消注册动画(移动)这个.参考文献。cdwrapper。风格。动画=' ' }，离开(el，done) { this .参考文献。cdwrapper。风格。过渡='所有0.4s '常量{ x，y，scale}=这个._getPosAndScale()这个参考文献。cdwrapper。style[' transform ']=' translate 3d($ { x } px，${y}px，0) scale(${scale})` //this .参考文献。cdwrapper。style[' transform ']=' rotate(360)'//transitionend事件在半铸钢钢性铸铁(铸造半钢)完成过渡后触发这个参考文献。cdwrapper。addevent listener(' transitionend '，()={ done() }) }，afterLeave() { this .参考文献。CDwrapper。风格。过渡='这个.参考文献。CDwrapper。style[' transform ']=' ' } } }/script style lang=' style '作用域。索引背景： # eee宽度： 100%高度： 100%显示：伸缩方向：列对齐-内容：对齐-项目之间的空格：中心.激光唱片盒显示器：伸缩对齐-内容：居中对齐-项目：中心宽度： 300像素高度： 300像素背景： #eee边框-半径： 50%。v-回车-激活，v-离开-活动运输：所有0.4秒.v-输入，v-leave-至opa市3360 0 .锥齿轮宽度： 300像素高度： 300像素边框-半径： 50%。迷你盒位置：绝对底部： 0右侧： 0左侧： 0显示器：柔性对齐-项目中心边框： 1px实心#555宽度： 100%高度： 40px盒尺寸：边框-盒v-回车-激活，v-离开-活动运输：所有0.4秒.v-输入，v-leave-to transform : translate 3d(0，40px，0)opa city 3360 0 .迷你img高： 40px宽： 40px盒尺寸：边框-盒图片高： 100%宽： 100%/款式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。