animate.js
2.0 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
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.setContentAnimate = void 0;
var version_1 = require('../common/version');
var utils_1 = require('../common/utils');
function useAnimate(context, expanded, mounted, height) {
var selector = '.van-collapse-item__wrapper';
if (expanded) {
context.animate(
selector,
[
{ height: 0, ease: 'ease-in-out', offset: 0 },
{ height: height + 'px', ease: 'ease-in-out', offset: 1 },
{ height: 'auto', ease: 'ease-in-out', offset: 1 },
],
mounted ? 300 : 0,
function () {
context.clearAnimation(selector);
}
);
return;
}
context.animate(
selector,
[
{ height: height + 'px', ease: 'ease-in-out', offset: 0 },
{ height: 0, ease: 'ease-in-out', offset: 1 },
],
300,
function () {
context.clearAnimation(selector);
}
);
}
function useAnimation(context, expanded, mounted, height) {
var animation = wx.createAnimation({
duration: 0,
timingFunction: 'ease-in-out',
});
if (expanded) {
if (height === 0) {
animation.height('auto').top(1).step();
} else {
animation
.height(height)
.top(1)
.step({
duration: mounted ? 300 : 1,
})
.height('auto')
.step();
}
context.setData({
animation: animation.export(),
});
return;
}
animation.height(height).top(0).step({ duration: 1 }).height(0).step({
duration: 300,
});
context.setData({
animation: animation.export(),
});
}
function setContentAnimate(context, expanded, mounted) {
utils_1
.getRect(context, '.van-collapse-item__content')
.then(function (rect) {
return rect.height;
})
.then(function (height) {
version_1.canIUseAnimate()
? useAnimate(context, expanded, mounted, height)
: useAnimation(context, expanded, mounted, height);
});
}
exports.setContentAnimate = setContentAnimate;