Vue中使用中使用create-keyframe-animation与动画钩子完成复杂与动画钩子完成复杂
动画动画
本篇文章主要介绍了 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的布局按效果图那些布置。
剩余8页未读，继续阅读
资源评论
