transition.js
1.6 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
57
"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`
});
const transition = {
methods: {
// 组件被点击发出事件
clickHandler() {
this.$emit("click");
},
// vue版本的组件进场处理
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;