animation.js
1.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// https://stackoverflow.com/questions/26874769/getcomputedstyle-and-csstext-in-ie-and-firefox
function getComputedCSSText (style) {
let cssText = ''
for (let attr in style) {
// m <?> matched
// #!en: hump to line
// #!zh: 驼峰转下划线
cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`
}
return cssText
}
export default {
methods: {
async runAnimations () {
const animationQueue = this.animations || this.element.animations || []
let len = animationQueue.length
if (len === 0) return
let that = this
let parentNode = this.$el
let animIdx = 0
const oldStyle = that.element.getStyle({ position: 'absolute' })
runAnimation()
function runAnimation () {
if (animIdx < len) {
const animation = animationQueue[animIdx]
let animationStyle = {
animationName: animation.type,
animationDuration: `${animation.duration}s`,
animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
animationDelay: `${animation.delay}s`,
animationFillMode: 'both'
}
parentNode.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle)
animIdx++
} else {
// reset to the initial state after the animation ended
parentNode.style.cssText = getComputedCSSText(oldStyle)
}
}
parentNode.addEventListener('animationend', runAnimation, false)
}
},
created () {
const that = this
window.getEditorApp && window.getEditorApp.$on('RUN_ANIMATIONS', () => {
that.runAnimations()
// if (that.active) {
// that.runAnimations()
// }
})
}
}