transition.js
3.19 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
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
import { isObj } from '../common/utils';
const getClassNames = (name) => ({
enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`
});
const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30));
export const transition = function (showDefaultValue) {
return Behavior({
properties: {
customStyle: String,
show: {
type: Boolean,
value: showDefaultValue,
observer: 'observeShow'
},
duration: {
type: [Number, Object],
value: 300,
observer: 'observeDuration'
},
name: {
type: String,
value: 'fade',
observer: 'updateClasses'
}
},
data: {
type: '',
inited: false,
display: false,
classNames: getClassNames('fade')
},
attached() {
if (this.data.show) {
this.show();
}
},
methods: {
observeShow(value) {
if (value) {
this.show();
}
else {
this.leave();
}
},
updateClasses(name) {
this.set({
classNames: getClassNames(name)
});
},
show() {
const { classNames, duration } = this.data;
const currentDuration = isObj(duration) ? duration.leave : duration;
Promise.resolve()
.then(nextTick)
.then(() => this.set({
inited: true,
display: true,
classes: classNames.enter,
currentDuration
}))
.then(nextTick)
.then(() => this.set({
classes: classNames['enter-to']
}));
},
leave() {
const { classNames, duration } = this.data;
const currentDuration = isObj(duration) ? duration.leave : duration;
if (+currentDuration === 0) {
this.onTransitionEnd();
return;
}
Promise.resolve()
.then(nextTick)
.then(() => this.set({
classes: classNames.leave,
currentDuration
}))
.then(nextTick)
.then(() => this.set({
classes: classNames['leave-to']
}));
},
onTransitionEnd() {
if (!this.data.show) {
this.set({ display: false });
this.$emit('transitionEnd');
}
}
}
});
};