Skip to content

Commit

Permalink
feat: update motion animation prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinymins
tinymins committed Jul 27, 2022
1 parent 597dfb1 commit 2a616bc
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 49 deletions.
6 changes: 3 additions & 3 deletions packages/drip-table/src/styles/motion/fade.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
}
}

.fade-motion(fade, drip-fade);
.fade-motion(fade, jfe-drip-table-motion-fade);

@keyframes drip-fade-in {
@keyframes jfe-drip-table-motion-fade-in {
0% {
opacity: 0;
}
Expand All @@ -33,7 +33,7 @@
}
}

@keyframes drip-fade-out {
@keyframes jfe-drip-table-motion-fade-out {
0% {
opacity: 1;
}
Expand Down
24 changes: 12 additions & 12 deletions packages/drip-table/src/styles/motion/move.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
}
}

.move-motion(move-up, drip-move-up);
.move-motion(move-down, drip-move-down);
.move-motion(move-left, drip-move-left);
.move-motion(move-right, drip-move-right);
.move-motion(move-up, jfe-drip-table-motion-move-up);
.move-motion(move-down, jfe-drip-table-motion-move-down);
.move-motion(move-left, jfe-drip-table-motion-move-left);
.move-motion(move-right, jfe-drip-table-motion-move-right);

@keyframes drip-move-down-in {
@keyframes jfe-drip-table-motion-move-down-in {
0% {
transform: translateY(100%);
transform-origin: 0 0;
Expand All @@ -40,7 +40,7 @@
}
}

@keyframes drip-move-down-out {
@keyframes jfe-drip-table-motion-move-down-out {
0% {
transform: translateY(0%);
transform-origin: 0 0;
Expand All @@ -54,7 +54,7 @@
}
}

@keyframes drip-move-left-in {
@keyframes jfe-drip-table-motion-move-left-in {
0% {
transform: translateX(-100%);
transform-origin: 0 0;
Expand All @@ -68,7 +68,7 @@
}
}

@keyframes drip-move-left-out {
@keyframes jfe-drip-table-motion-move-left-out {
0% {
transform: translateX(0%);
transform-origin: 0 0;
Expand All @@ -82,7 +82,7 @@
}
}

@keyframes drip-move-right-in {
@keyframes jfe-drip-table-motion-move-right-in {
0% {
transform: translateX(100%);
transform-origin: 0 0;
Expand All @@ -96,7 +96,7 @@
}
}

@keyframes drip-move-right-out {
@keyframes jfe-drip-table-motion-move-right-out {
0% {
transform: translateX(0%);
transform-origin: 0 0;
Expand All @@ -110,7 +110,7 @@
}
}

@keyframes drip-move-up-in {
@keyframes jfe-drip-table-motion-move-up-in {
0% {
transform: translateY(-100%);
transform-origin: 0 0;
Expand All @@ -124,7 +124,7 @@
}
}

@keyframes drip-move-up-out {
@keyframes jfe-drip-table-motion-move-up-out {
0% {
transform: translateY(0%);
transform-origin: 0 0;
Expand Down
6 changes: 3 additions & 3 deletions packages/drip-table/src/styles/motion/other.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,20 @@ html {
box-shadow: 0 0 0 0 @primary-color;
box-shadow: 0 0 0 0 var(--drip-wave-shadow-color);
opacity: .2;
animation: fade-effect 2s @ease-out-circ, wave-effect .4s @ease-out-circ;
animation: jfe-drip-table-motion-fade-effect 2s @ease-out-circ, jfe-drip-table-motion-wave-effect .4s @ease-out-circ;
animation-fill-mode: forwards;
content: "";
pointer-events: none;
}

@keyframes wave-effect {
@keyframes jfe-drip-table-motion-wave-effect {
100% {
box-shadow: 0 0 0 @primary-color;
box-shadow: 0 0 0 @wave-animation-width var(--drip-wave-shadow-color);
}
}

@keyframes fade-effect {
@keyframes jfe-drip-table-motion-fade-effect {
100% {
opacity: 0;
}
Expand Down
24 changes: 12 additions & 12 deletions packages/drip-table/src/styles/motion/slide.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
}
}

.slide-motion(slide-up, drip-slide-up);
.slide-motion(slide-down, drip-slide-down);
.slide-motion(slide-left, drip-slide-left);
.slide-motion(slide-right, drip-slide-right);
.slide-motion(slide-up, jfe-drip-table-motion-slide-up);
.slide-motion(slide-down, jfe-drip-table-motion-slide-down);
.slide-motion(slide-left, jfe-drip-table-motion-slide-left);
.slide-motion(slide-right, jfe-drip-table-motion-slide-right);

@keyframes drip-slide-up-in {
@keyframes jfe-drip-table-motion-slide-up-in {
0% {
transform: scaleY(.8);
transform-origin: 0% 0%;
Expand All @@ -40,7 +40,7 @@
}
}

@keyframes drip-slide-up-out {
@keyframes jfe-drip-table-motion-slide-up-out {
0% {
transform: scaleY(1);
transform-origin: 0% 0%;
Expand All @@ -54,7 +54,7 @@
}
}

@keyframes drip-slide-down-in {
@keyframes jfe-drip-table-motion-slide-down-in {
0% {
transform: scaleY(.8);
transform-origin: 100% 100%;
Expand All @@ -68,7 +68,7 @@
}
}

@keyframes drip-slide-down-out {
@keyframes jfe-drip-table-motion-slide-down-out {
0% {
transform: scaleY(1);
transform-origin: 100% 100%;
Expand All @@ -82,7 +82,7 @@
}
}

@keyframes drip-slide-left-in {
@keyframes jfe-drip-table-motion-slide-left-in {
0% {
transform: scaleX(.8);
transform-origin: 0% 0%;
Expand All @@ -96,7 +96,7 @@
}
}

@keyframes drip-slide-left-out {
@keyframes jfe-drip-table-motion-slide-left-out {
0% {
transform: scaleX(1);
transform-origin: 0% 0%;
Expand All @@ -110,7 +110,7 @@
}
}

@keyframes drip-slide-right-in {
@keyframes jfe-drip-table-motion-slide-right-in {
0% {
transform: scaleX(.8);
transform-origin: 100% 0%;
Expand All @@ -124,7 +124,7 @@
}
}

@keyframes drip-slide-right-out {
@keyframes jfe-drip-table-motion-slide-right-out {
0% {
transform: scaleX(1);
transform-origin: 100% 0%;
Expand Down
38 changes: 19 additions & 19 deletions packages/drip-table/src/styles/motion/zoom.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@
}
}

.zoom-motion(zoom, drip-zoom);
.zoom-motion(zoom-big, drip-zoom-big);
.zoom-motion(zoom-big-fast, drip-zoom-big, @animation-duration-fast);
.zoom-motion(zoom, jfe-drip-table-motion-zoom);
.zoom-motion(zoom-big, jfe-drip-table-motion-zoom-big);
.zoom-motion(zoom-big-fast, jfe-drip-table-motion-zoom-big, @animation-duration-fast);

.zoom-motion(zoom-up, drip-zoom-up);
.zoom-motion(zoom-down, drip-zoom-down);
.zoom-motion(zoom-left, drip-zoom-left);
.zoom-motion(zoom-right, drip-zoom-right);
.zoom-motion(zoom-up, jfe-drip-table-motion-zoom-up);
.zoom-motion(zoom-down, jfe-drip-table-motion-zoom-down);
.zoom-motion(zoom-left, jfe-drip-table-motion-zoom-left);
.zoom-motion(zoom-right, jfe-drip-table-motion-zoom-right);

@keyframes drip-zoom-in {
@keyframes jfe-drip-table-motion-zoom-in {
0% {
transform: scale(.2);
opacity: 0;
Expand All @@ -47,7 +47,7 @@
}
}

@keyframes drip-zoom-out {
@keyframes jfe-drip-table-motion-zoom-out {
0% {
transform: scale(1);
}
Expand All @@ -58,7 +58,7 @@
}
}

@keyframes drip-zoom-big-in {
@keyframes jfe-drip-table-motion-zoom-big-in {
0% {
transform: scale(.8);
opacity: 0;
Expand All @@ -70,7 +70,7 @@
}
}

@keyframes drip-zoom-big-out {
@keyframes jfe-drip-table-motion-zoom-big-out {
0% {
transform: scale(1);
}
Expand All @@ -81,7 +81,7 @@
}
}

@keyframes drip-zoom-up-in {
@keyframes jfe-drip-table-motion-zoom-up-in {
0% {
transform: scale(.8);
transform-origin: 50% 0%;
Expand All @@ -94,7 +94,7 @@
}
}

@keyframes drip-zoom-up-out {
@keyframes jfe-drip-table-motion-zoom-up-out {
0% {
transform: scale(1);
transform-origin: 50% 0%;
Expand All @@ -107,7 +107,7 @@
}
}

@keyframes drip-zoom-left-in {
@keyframes jfe-drip-table-motion-zoom-left-in {
0% {
transform: scale(.8);
transform-origin: 0% 50%;
Expand All @@ -120,7 +120,7 @@
}
}

@keyframes drip-zoom-left-out {
@keyframes jfe-drip-table-motion-zoom-left-out {
0% {
transform: scale(1);
transform-origin: 0% 50%;
Expand All @@ -133,7 +133,7 @@
}
}

@keyframes drip-zoom-right-in {
@keyframes jfe-drip-table-motion-zoom-right-in {
0% {
transform: scale(.8);
transform-origin: 100% 50%;
Expand All @@ -146,7 +146,7 @@
}
}

@keyframes drip-zoom-right-out {
@keyframes jfe-drip-table-motion-zoom-right-out {
0% {
transform: scale(1);
transform-origin: 100% 50%;
Expand All @@ -159,7 +159,7 @@
}
}

@keyframes drip-zoom-down-in {
@keyframes jfe-drip-table-motion-zoom-down-in {
0% {
transform: scale(.8);
transform-origin: 50% 100%;
Expand All @@ -172,7 +172,7 @@
}
}

@keyframes drip-zoom-down-out {
@keyframes jfe-drip-table-motion-zoom-down-out {
0% {
transform: scale(1);
transform-origin: 50% 100%;
Expand Down

0 comments on commit 2a616bc

Please sign in to comment.