Skip to content

Commit 3fb4ad5

Browse files
tinyminstinymins
committed
feat: add animation styles
1 parent 37d26d7 commit 3fb4ad5

File tree

9 files changed

+684
-0
lines changed

9 files changed

+684
-0
lines changed

‎packages/drip-table/src/styles/index.less‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@import "./theme/default.less";
10+
@import "./motion.less";

‎packages/drip-table/src/styles/mixins/motion.less‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
.motion-common(@duration: @animation-duration-base) {
10+
animation-duration: @duration;
11+
animation-fill-mode: both;
12+
}
13+
14+
.motion-common-leave(@duration: @animation-duration-base) {
15+
animation-duration: @duration;
16+
animation-fill-mode: both;
17+
}
18+
19+
.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
20+
.@{className}-enter,
21+
.@{className}-appear {
22+
.motion-common(@duration);
23+
24+
animation-play-state: paused;
25+
}
26+
.@{className}-leave {
27+
.motion-common-leave(@duration);
28+
29+
animation-play-state: paused;
30+
}
31+
.@{className}-enter.@{className}-enter-active,
32+
.@{className}-appear.@{className}-appear-active {
33+
animation-name: ~"@{keyframeName}-in";
34+
animation-play-state: running;
35+
}
36+
.@{className}-leave.@{className}-leave-active {
37+
animation-name: ~"@{keyframeName}-out";
38+
animation-play-state: running;
39+
pointer-events: none;
40+
}
41+
}

‎packages/drip-table/src/styles/motion.less‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@import "mixins/motion";
10+
@import "motion/fade";
11+
@import "motion/move";
12+
@import "motion/other";
13+
@import "motion/slide";
14+
@import "motion/zoom";
15+
16+
@prefixCls: jfe-drip-table-motion;
17+
18+
// For common/openAnimation
19+
.@{prefixCls}-collapse-legacy {
20+
overflow: hidden;
21+
22+
&-active {
23+
transition:
24+
height @animation-duration-base @ease-in-out,
25+
opacity @animation-duration-base @ease-in-out !important;
26+
}
27+
}
28+
29+
.@{prefixCls}-collapse {
30+
overflow: hidden;
31+
transition:
32+
height @animation-duration-base @ease-in-out,
33+
opacity @animation-duration-base @ease-in-out !important;
34+
}

‎packages/drip-table/src/styles/motion/fade.less‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@prefixCls: jfe-drip-table-motion;
10+
11+
.fade-motion(@className, @keyframeName) {
12+
@name: ~"@{prefixCls}-@{className}";
13+
.make-motion(@name, @keyframeName);
14+
.@{name}-enter,
15+
.@{name}-appear {
16+
opacity: 0;
17+
animation-timing-function: linear;
18+
}
19+
.@{name}-leave {
20+
animation-timing-function: linear;
21+
}
22+
}
23+
24+
.fade-motion(fade, drip-fade);
25+
26+
@keyframes drip-fade-in {
27+
0% {
28+
opacity: 0;
29+
}
30+
31+
100% {
32+
opacity: 1;
33+
}
34+
}
35+
36+
@keyframes drip-fade-out {
37+
0% {
38+
opacity: 1;
39+
}
40+
41+
100% {
42+
opacity: 0;
43+
}
44+
}

‎packages/drip-table/src/styles/motion/move.less‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@prefixCls: jfe-drip-table-motion;
10+
11+
.move-motion(@className, @keyframeName) {
12+
@name: ~"@{prefixCls}-@{className}";
13+
.make-motion(@name, @keyframeName);
14+
.@{name}-enter,
15+
.@{name}-appear {
16+
opacity: 0;
17+
animation-timing-function: @ease-out-circ;
18+
}
19+
.@{name}-leave {
20+
animation-timing-function: @ease-in-circ;
21+
}
22+
}
23+
24+
.move-motion(move-up, drip-move-up);
25+
.move-motion(move-down, drip-move-down);
26+
.move-motion(move-left, drip-move-left);
27+
.move-motion(move-right, drip-move-right);
28+
29+
@keyframes drip-move-down-in {
30+
0% {
31+
transform: translateY(100%);
32+
transform-origin: 0 0;
33+
opacity: 0;
34+
}
35+
36+
100% {
37+
transform: translateY(0%);
38+
transform-origin: 0 0;
39+
opacity: 1;
40+
}
41+
}
42+
43+
@keyframes drip-move-down-out {
44+
0% {
45+
transform: translateY(0%);
46+
transform-origin: 0 0;
47+
opacity: 1;
48+
}
49+
50+
100% {
51+
transform: translateY(100%);
52+
transform-origin: 0 0;
53+
opacity: 0;
54+
}
55+
}
56+
57+
@keyframes drip-move-left-in {
58+
0% {
59+
transform: translateX(-100%);
60+
transform-origin: 0 0;
61+
opacity: 0;
62+
}
63+
64+
100% {
65+
transform: translateX(0%);
66+
transform-origin: 0 0;
67+
opacity: 1;
68+
}
69+
}
70+
71+
@keyframes drip-move-left-out {
72+
0% {
73+
transform: translateX(0%);
74+
transform-origin: 0 0;
75+
opacity: 1;
76+
}
77+
78+
100% {
79+
transform: translateX(-100%);
80+
transform-origin: 0 0;
81+
opacity: 0;
82+
}
83+
}
84+
85+
@keyframes drip-move-right-in {
86+
0% {
87+
transform: translateX(100%);
88+
transform-origin: 0 0;
89+
opacity: 0;
90+
}
91+
92+
100% {
93+
transform: translateX(0%);
94+
transform-origin: 0 0;
95+
opacity: 1;
96+
}
97+
}
98+
99+
@keyframes drip-move-right-out {
100+
0% {
101+
transform: translateX(0%);
102+
transform-origin: 0 0;
103+
opacity: 1;
104+
}
105+
106+
100% {
107+
transform: translateX(100%);
108+
transform-origin: 0 0;
109+
opacity: 0;
110+
}
111+
}
112+
113+
@keyframes drip-move-up-in {
114+
0% {
115+
transform: translateY(-100%);
116+
transform-origin: 0 0;
117+
opacity: 0;
118+
}
119+
120+
100% {
121+
transform: translateY(0%);
122+
transform-origin: 0 0;
123+
opacity: 1;
124+
}
125+
}
126+
127+
@keyframes drip-move-up-out {
128+
0% {
129+
transform: translateY(0%);
130+
transform-origin: 0 0;
131+
opacity: 1;
132+
}
133+
134+
100% {
135+
transform: translateY(-100%);
136+
transform-origin: 0 0;
137+
opacity: 0;
138+
}
139+
}

‎packages/drip-table/src/styles/motion/other.less‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@prefixCls: jfe-drip-table-motion;
10+
11+
@keyframes loading-circle {
12+
100% {
13+
transform: rotate(360deg);
14+
}
15+
}
16+
17+
@click-animating-true: ~"[@{prefixCls}-click-animating='true']";
18+
@click-animating-with-extra-node-true: ~"[@{prefixCls}-click-animating-without-extra-node='true']";
19+
20+
@{click-animating-true},
21+
@{click-animating-with-extra-node-true} {
22+
position: relative;
23+
}
24+
25+
html {
26+
--drip-wave-shadow-color: @primary-color;
27+
--scroll-bar: 0;
28+
}
29+
30+
@click-animating-with-extra-node-true-after: ~"@{click-animating-with-extra-node-true}::after";
31+
32+
@{click-animating-with-extra-node-true-after},
33+
.@{prefixCls}-click-animating-node {
34+
position: absolute;
35+
top: 0;
36+
right: 0;
37+
bottom: 0;
38+
left: 0;
39+
display: block;
40+
border-radius: inherit;
41+
box-shadow: 0 0 0 0 @primary-color;
42+
box-shadow: 0 0 0 0 var(--drip-wave-shadow-color);
43+
opacity: .2;
44+
animation: fade-effect 2s @ease-out-circ, wave-effect .4s @ease-out-circ;
45+
animation-fill-mode: forwards;
46+
content: "";
47+
pointer-events: none;
48+
}
49+
50+
@keyframes wave-effect {
51+
100% {
52+
box-shadow: 0 0 0 @primary-color;
53+
box-shadow: 0 0 0 @wave-animation-width var(--drip-wave-shadow-color);
54+
}
55+
}
56+
57+
@keyframes fade-effect {
58+
100% {
59+
opacity: 0;
60+
}
61+
}

0 commit comments

Comments
 (0)