1 | import { cssAnimation } from 'tinper-bee-core';
|
2 |
|
3 | function animate(node, show, done) {
|
4 | let height;
|
5 | return cssAnimation(node, 'u-motion-collapse', {
|
6 | start() {
|
7 | if (!show) {
|
8 | node.style.height = `${node.offsetHeight}px`;
|
9 | } else {
|
10 | height = node.offsetHeight;
|
11 | node.style.height = 0;
|
12 | }
|
13 | },
|
14 | active() {
|
15 | node.style.height = `${show ? height : 0}px`;
|
16 | },
|
17 | end() {
|
18 | node.style.height = '';
|
19 | done();
|
20 | },
|
21 | });
|
22 | }
|
23 |
|
24 | const animation = {
|
25 | enter(node, done) {
|
26 | return animate(node, true, done);
|
27 | },
|
28 | leave(node, done) {
|
29 | return animate(node, false, done);
|
30 | },
|
31 | appear(node, done) {
|
32 | return animate(node, true, done);
|
33 | },
|
34 | };
|
35 |
|
36 | export default animation;
|