[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 ~~~