-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
38 lines (30 loc) · 1.17 KB
/
index.js
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
export default {
inserted(el, binding, vnode) {
const props = binding.value
if (props == null) {
throw new Erorr('please, provide value for animate directive')
}
// init
el.style.opacity = 0
el.classList.add('animated')
// listen for changes
const eventNames = ['webkitAnimationEnd', 'mozAnimationEnd', 'MSAnimationEnd', 'oanimationend', 'animationend']
eventNames.map(item =>
el.addEventListener(item, () =>
el.classList.remove(props.name)
)
)
// animate
if (!props.active) {el.style.opacity = 0; return}
setTimeout(() => {el.style.opacity = 1; el.classList.add(props.name)}, props.delay || 0)
},
update(el, binding, vnode) {
const props = binding.value
const oldProps = binding.oldValue
// reduces number of unnecessarily fired animations
if (oldProps.active === true && props.active === true) { return }
// animate
if (!props.active) {el.style.opacity = 0; return}
setTimeout(() => {el.style.opacity = 1; el.classList.add(props.name)}, props.delay || 0)
}
}