transition.js
1.5 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
"use strict";
const getClassNames = (name) => ({
enter: `u-${name}-enter u-${name}-enter-active`,
"enter-to": `u-${name}-enter-to u-${name}-enter-active`,
leave: `u-${name}-leave u-${name}-leave-active`,
"leave-to": `u-${name}-leave-to u-${name}-leave-active`
});
var transition = {
methods: {
clickHandler() {
this.$emit("click");
},
vueEnter() {
const classNames = getClassNames(this.mode);
this.status = "enter";
this.$emit("beforeEnter");
this.inited = true;
this.display = true;
this.classes = classNames.enter;
this.$nextTick(async () => {
this.$emit("enter");
this.transitionEnded = false;
this.$emit("afterEnter");
this.classes = classNames["enter-to"];
});
},
vueLeave() {
if (!this.display)
return;
const classNames = getClassNames(this.mode);
this.status = "leave";
this.$emit("beforeLeave");
this.classes = classNames.leave;
this.$nextTick(() => {
this.transitionEnded = false;
this.$emit("leave");
setTimeout(this.onTransitionEnd, this.duration);
this.classes = classNames["leave-to"];
});
},
onTransitionEnd() {
if (this.transitionEnded)
return;
this.transitionEnded = true;
this.$emit(this.status === "leave" ? "afterLeave" : "afterEnter");
if (!this.show && this.display) {
this.display = false;
this.inited = false;
}
}
}
};
exports.transition = transition;