1 | import cssAnimation from './css-animation';
|
2 | import { nextTick } from 'vue';
|
3 |
|
4 | function animate(node, show, done) {
|
5 | var height;
|
6 | var requestAnimationFrameId;
|
7 | var appearRequestAnimationFrameId;
|
8 | return cssAnimation(node, 'ant-motion-collapse-legacy', {
|
9 | start: function start() {
|
10 | if (appearRequestAnimationFrameId) {
|
11 | cancelAnimationFrame(appearRequestAnimationFrameId);
|
12 | }
|
13 |
|
14 | if (!show) {
|
15 | node.style.height = "".concat(node.offsetHeight, "px");
|
16 | node.style.opacity = '1';
|
17 | } else {
|
18 | height = node.offsetHeight;
|
19 |
|
20 |
|
21 | if (height === 0) {
|
22 | appearRequestAnimationFrameId = requestAnimationFrame(function () {
|
23 | height = node.offsetHeight;
|
24 | node.style.height = '0px';
|
25 | node.style.opacity = '0';
|
26 | });
|
27 | } else {
|
28 | node.style.height = '0px';
|
29 | node.style.opacity = '0';
|
30 | }
|
31 | }
|
32 | },
|
33 | active: function active() {
|
34 | if (requestAnimationFrameId) {
|
35 | cancelAnimationFrame(requestAnimationFrameId);
|
36 | }
|
37 |
|
38 | requestAnimationFrameId = requestAnimationFrame(function () {
|
39 | node.style.height = "".concat(show ? height : 0, "px");
|
40 | node.style.opacity = show ? '1' : '0';
|
41 | });
|
42 | },
|
43 | end: function end() {
|
44 | if (appearRequestAnimationFrameId) {
|
45 | cancelAnimationFrame(appearRequestAnimationFrameId);
|
46 | }
|
47 |
|
48 | if (requestAnimationFrameId) {
|
49 | cancelAnimationFrame(requestAnimationFrameId);
|
50 | }
|
51 |
|
52 | node.style.height = '';
|
53 | node.style.opacity = '';
|
54 | done && done();
|
55 | }
|
56 | });
|
57 | }
|
58 |
|
59 | var animation = {
|
60 | onEnter: function onEnter(node, done) {
|
61 | nextTick(function () {
|
62 | animate(node, true, done);
|
63 | });
|
64 | },
|
65 | onLeave: function onLeave(node, done) {
|
66 | return animate(node, false, done);
|
67 | }
|
68 | };
|
69 | export default animation; |
\ | No newline at end of file |