hide show vue 动画_keyframes动画

[TOC]

#### Vue 中使用 keyframes 动画

* [ ] 实现原理

1. 第一次弹出浮层，弹出变量存入vuex中

2. 监听vuex中浮层变量，true时，执行动画帧 false 关闭动画帧

~~~

~~~

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

~~~