[TOC] #### Vue 中使用 keyframes 动画 * [ ] 实现原理 1. 第一次弹出浮层，弹出变量存入vuex中 2. 监听vuex中浮层变量，true时，执行动画帧 false 关闭动画帧 ~~~ <template> <transition name="fade"> <div class="dialog-center-wrapper" v-show="dialogCenter"> <div class="dialog-img" :class="{'animation': runAnimation}"> <img src="../../assets/theme/imgs/dialog.png"> <div class="close" @click="hideDialog"></div> </div> <div class="point-wrapper"> <div class="point" v-for="(item,index) in pointList" :key="index"></div> </div> </div> </transition> </template> ~~~ >[info] 顶层使用了一个淡入淡出的动画效果 > :class="{'animation': runAnimation}" 动画帧效果 ~~~ watch: { dialogCenter(v) { this.runAnimations(v) } }, data() { return { runAnimation: false, pointList: [] } }, ~~~ >[danger] runAnimation 动画帧是否显示 > dialogCenter 监听vuex中 dialogCenter 的值，发生改变触发动画 ~~~ &.animation animation img-move .6s ease-in @keyframes img-move 0% opacity 0 transform scale(0) 50% transform scale(1.2) opacity 1 75% transform scale(.9) opacity 1 100% transform scale(1) opacity 1 ~~~