/
baseTransition.js
104 lines (104 loc) · 2.66 KB
/
baseTransition.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
export default {
inheritAttrs: false,
props: {
/**
* Transition duration. Number for specifying the same duration for enter/leave transitions
* Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
*/
duration: {
type: [Number, Object],
default: 300
},
/**
* Whether the component should be a `transition-group` component.
*/
group: Boolean,
/**
* Transition tag, in case the component is a `transition-group`
*/
tag: {
type: String,
default: 'span'
},
/**
* Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
* Can be specified with styles as well but it's shorter with this prop
*/
origin: {
type: String,
default: ''
},
/**
* Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
*/
styles: {
type: Object,
default: () => {
return {
animationFillMode: 'both',
animationTimingFunction: 'ease-out'
}
}
}
},
computed: {
componentType() {
return this.group ? 'transition-group' : 'transition'
},
hooks() {
return {
beforeEnter: this.beforeEnter,
afterEnter: this.cleanUpStyles,
beforeLeave: this.beforeLeave,
leave: this.leave,
afterLeave: this.cleanUpStyles,
...this.$listeners
}
}
},
methods: {
beforeEnter(el) {
let enterDuration = this.duration.enter ? this.duration.enter : this.duration
el.style.animationDuration = `${enterDuration / 1000}s`
this.setStyles(el)
},
cleanUpStyles(el) {
Object.keys(this.styles).forEach(key => {
const styleValue = this.styles[key]
if (styleValue) {
el.style[key] = ''
}
})
el.style.animationDuration = ''
},
beforeLeave(el) {
let leaveDuration = this.duration.leave ? this.duration.leave : this.duration
el.style.animationDuration = `${leaveDuration / 1000}s`
this.setStyles(el)
},
leave(el) {
this.setAbsolutePosition(el)
},
setStyles(el) {
this.setTransformOrigin(el)
Object.keys(this.styles).forEach(key => {
const styleValue = this.styles[key]
if (styleValue) {
el.style[key] = styleValue
}
})
},
setAbsolutePosition(el) {
if (this.group) {
el.style.position = 'absolute'
}
return this
},
setTransformOrigin(el) {
if (this.origin) {
el.style.transformOrigin = this.origin
}
return this
}
}
}