feat: update motion animation prefix

tinymins · tinymins · commit 2a616bced661 · 2022-07-27T14:14:22.000+08:00
diff --git a/packages/drip-table/src/styles/motion/fade.less b/packages/drip-table/src/styles/motion/fade.less
@@ -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;
   }
@@ -33,7 +33,7 @@
   }
 }
 
-@keyframes drip-fade-out {
+@keyframes jfe-drip-table-motion-fade-out {
   0% {
     opacity: 1;
   }
diff --git a/packages/drip-table/src/styles/motion/move.less b/packages/drip-table/src/styles/motion/move.less
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
diff --git a/packages/drip-table/src/styles/motion/other.less b/packages/drip-table/src/styles/motion/other.less
@@ -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;
   }
diff --git a/packages/drip-table/src/styles/motion/slide.less b/packages/drip-table/src/styles/motion/slide.less
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
diff --git a/packages/drip-table/src/styles/motion/zoom.less b/packages/drip-table/src/styles/motion/zoom.less
@@ -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;
@@ -47,7 +47,7 @@
   }
 }
 
-@keyframes drip-zoom-out {
+@keyframes jfe-drip-table-motion-zoom-out {
   0% {
     transform: scale(1);
   }
@@ -58,7 +58,7 @@
   }
 }
 
-@keyframes drip-zoom-big-in {
+@keyframes jfe-drip-table-motion-zoom-big-in {
   0% {
     transform: scale(.8);
     opacity: 0;
@@ -70,7 +70,7 @@
   }
 }
 
-@keyframes drip-zoom-big-out {
+@keyframes jfe-drip-table-motion-zoom-big-out {
   0% {
     transform: scale(1);
   }
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;
@@ -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%;

Original file line number	Diff line number	Diff line change
`@@ -21,9 +21,9 @@`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`
`24`		`-.fade-motion(fade, drip-fade);`
	`24`	`+.fade-motion(fade, jfe-drip-table-motion-fade);`
`25`	`25`
`26`		`-@keyframes drip-fade-in {`
	`26`	`+@keyframes jfe-drip-table-motion-fade-in {`
`27`	`27`	`0% {`
`28`	`28`	`opacity: 0;`
`29`	`29`	`}`
`@@ -33,7 +33,7 @@`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`36`		`-@keyframes drip-fade-out {`
	`36`	`+@keyframes jfe-drip-table-motion-fade-out {`
`37`	`37`	`0% {`
`38`	`38`	`opacity: 1;`
`39`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,12 +21,12 @@`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`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);`
	`24`	`+.move-motion(move-up, jfe-drip-table-motion-move-up);`
	`25`	`+.move-motion(move-down, jfe-drip-table-motion-move-down);`
	`26`	`+.move-motion(move-left, jfe-drip-table-motion-move-left);`
	`27`	`+.move-motion(move-right, jfe-drip-table-motion-move-right);`
`28`	`28`
`29`		`-@keyframes drip-move-down-in {`
	`29`	`+@keyframes jfe-drip-table-motion-move-down-in {`
`30`	`30`	`0% {`
`31`	`31`	`transform: translateY(100%);`
`32`	`32`	`transform-origin: 0 0;`
`@@ -40,7 +40,7 @@`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`
`43`		`-@keyframes drip-move-down-out {`
	`43`	`+@keyframes jfe-drip-table-motion-move-down-out {`
`44`	`44`	`0% {`
`45`	`45`	`transform: translateY(0%);`
`46`	`46`	`transform-origin: 0 0;`
`@@ -54,7 +54,7 @@`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
`57`		`-@keyframes drip-move-left-in {`
	`57`	`+@keyframes jfe-drip-table-motion-move-left-in {`
`58`	`58`	`0% {`
`59`	`59`	`transform: translateX(-100%);`
`60`	`60`	`transform-origin: 0 0;`
`@@ -68,7 +68,7 @@`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`
`71`		`-@keyframes drip-move-left-out {`
	`71`	`+@keyframes jfe-drip-table-motion-move-left-out {`
`72`	`72`	`0% {`
`73`	`73`	`transform: translateX(0%);`
`74`	`74`	`transform-origin: 0 0;`
`@@ -82,7 +82,7 @@`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`
`85`		`-@keyframes drip-move-right-in {`
	`85`	`+@keyframes jfe-drip-table-motion-move-right-in {`
`86`	`86`	`0% {`
`87`	`87`	`transform: translateX(100%);`
`88`	`88`	`transform-origin: 0 0;`
`@@ -96,7 +96,7 @@`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`
`99`		`-@keyframes drip-move-right-out {`
	`99`	`+@keyframes jfe-drip-table-motion-move-right-out {`
`100`	`100`	`0% {`
`101`	`101`	`transform: translateX(0%);`
`102`	`102`	`transform-origin: 0 0;`
`@@ -110,7 +110,7 @@`
`110`	`110`	`}`
`111`	`111`	`}`
`112`	`112`
`113`		`-@keyframes drip-move-up-in {`
	`113`	`+@keyframes jfe-drip-table-motion-move-up-in {`
`114`	`114`	`0% {`
`115`	`115`	`transform: translateY(-100%);`
`116`	`116`	`transform-origin: 0 0;`
`@@ -124,7 +124,7 @@`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`
`127`		`-@keyframes drip-move-up-out {`
	`127`	`+@keyframes jfe-drip-table-motion-move-up-out {`
`128`	`128`	`0% {`
`129`	`129`	`transform: translateY(0%);`
`130`	`130`	`transform-origin: 0 0;`
Original file line number	Diff line number	Diff line change
`@@ -41,20 +41,20 @@ html {`
`41`	`41`	`box-shadow: 0 0 0 0 @primary-color;`
`42`	`42`	`box-shadow: 0 0 0 0 var(--drip-wave-shadow-color);`
`43`	`43`	`opacity: .2;`
`44`		`- animation: fade-effect 2s @ease-out-circ, wave-effect .4s @ease-out-circ;`
	`44`	`+ animation: jfe-drip-table-motion-fade-effect 2s @ease-out-circ, jfe-drip-table-motion-wave-effect .4s @ease-out-circ;`
`45`	`45`	`animation-fill-mode: forwards;`
`46`	`46`	`content: "";`
`47`	`47`	`pointer-events: none;`
`48`	`48`	`}`
`49`	`49`
`50`		`-@keyframes wave-effect {`
	`50`	`+@keyframes jfe-drip-table-motion-wave-effect {`
`51`	`51`	`100% {`
`52`	`52`	`box-shadow: 0 0 0 @primary-color;`
`53`	`53`	`box-shadow: 0 0 0 @wave-animation-width var(--drip-wave-shadow-color);`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
`57`		`-@keyframes fade-effect {`
	`57`	`+@keyframes jfe-drip-table-motion-fade-effect {`
`58`	`58`	`100% {`
`59`	`59`	`opacity: 0;`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,16 +26,16 @@`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`29`		`-.zoom-motion(zoom, drip-zoom);`
`30`		`-.zoom-motion(zoom-big, drip-zoom-big);`
`31`		`-.zoom-motion(zoom-big-fast, drip-zoom-big, @animation-duration-fast);`
	`29`	`+.zoom-motion(zoom, jfe-drip-table-motion-zoom);`
	`30`	`+.zoom-motion(zoom-big, jfe-drip-table-motion-zoom-big);`
	`31`	`+.zoom-motion(zoom-big-fast, jfe-drip-table-motion-zoom-big, @animation-duration-fast);`
`32`	`32`
`33`		`-.zoom-motion(zoom-up, drip-zoom-up);`
`34`		`-.zoom-motion(zoom-down, drip-zoom-down);`
`35`		`-.zoom-motion(zoom-left, drip-zoom-left);`
`36`		`-.zoom-motion(zoom-right, drip-zoom-right);`
	`33`	`+.zoom-motion(zoom-up, jfe-drip-table-motion-zoom-up);`
	`34`	`+.zoom-motion(zoom-down, jfe-drip-table-motion-zoom-down);`
	`35`	`+.zoom-motion(zoom-left, jfe-drip-table-motion-zoom-left);`
	`36`	`+.zoom-motion(zoom-right, jfe-drip-table-motion-zoom-right);`
`37`	`37`
`38`		`-@keyframes drip-zoom-in {`
	`38`	`+@keyframes jfe-drip-table-motion-zoom-in {`
`39`	`39`	`0% {`
`40`	`40`	`transform: scale(.2);`
`41`	`41`	`opacity: 0;`
`@@ -47,7 +47,7 @@`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`
`50`		`-@keyframes drip-zoom-out {`
	`50`	`+@keyframes jfe-drip-table-motion-zoom-out {`
`51`	`51`	`0% {`
`52`	`52`	`transform: scale(1);`
`53`	`53`	`}`
`@@ -58,7 +58,7 @@`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`
`61`		`-@keyframes drip-zoom-big-in {`
	`61`	`+@keyframes jfe-drip-table-motion-zoom-big-in {`
`62`	`62`	`0% {`
`63`	`63`	`transform: scale(.8);`
`64`	`64`	`opacity: 0;`
`@@ -70,7 +70,7 @@`
`70`	`70`	`}`
`71`	`71`	`}`
`72`	`72`
`73`		`-@keyframes drip-zoom-big-out {`
	`73`	`+@keyframes jfe-drip-table-motion-zoom-big-out {`
`74`	`74`	`0% {`
`75`	`75`	`transform: scale(1);`
`76`	`76`	`}`
`@@ -81,7 +81,7 @@`
`81`	`81`	`}`
`82`	`82`	`}`
`83`	`83`
`84`		`-@keyframes drip-zoom-up-in {`
	`84`	`+@keyframes jfe-drip-table-motion-zoom-up-in {`
`85`	`85`	`0% {`
`86`	`86`	`transform: scale(.8);`
`87`	`87`	`transform-origin: 50% 0%;`
`@@ -94,7 +94,7 @@`
`94`	`94`	`}`
`95`	`95`	`}`
`96`	`96`
`97`		`-@keyframes drip-zoom-up-out {`
	`97`	`+@keyframes jfe-drip-table-motion-zoom-up-out {`
`98`	`98`	`0% {`
`99`	`99`	`transform: scale(1);`
`100`	`100`	`transform-origin: 50% 0%;`
`@@ -107,7 +107,7 @@`
`107`	`107`	`}`
`108`	`108`	`}`
`109`	`109`
`110`		`-@keyframes drip-zoom-left-in {`
	`110`	`+@keyframes jfe-drip-table-motion-zoom-left-in {`
`111`	`111`	`0% {`
`112`	`112`	`transform: scale(.8);`
`113`	`113`	`transform-origin: 0% 50%;`
`@@ -120,7 +120,7 @@`
`120`	`120`	`}`
`121`	`121`	`}`
`122`	`122`
`123`		`-@keyframes drip-zoom-left-out {`
	`123`	`+@keyframes jfe-drip-table-motion-zoom-left-out {`
`124`	`124`	`0% {`
`125`	`125`	`transform: scale(1);`
`126`	`126`	`transform-origin: 0% 50%;`
`@@ -133,7 +133,7 @@`
`133`	`133`	`}`
`134`	`134`	`}`
`135`	`135`
`136`		`-@keyframes drip-zoom-right-in {`
	`136`	`+@keyframes jfe-drip-table-motion-zoom-right-in {`
`137`	`137`	`0% {`
`138`	`138`	`transform: scale(.8);`
`139`	`139`	`transform-origin: 100% 50%;`
`@@ -146,7 +146,7 @@`
`146`	`146`	`}`
`147`	`147`	`}`
`148`	`148`
`149`		`-@keyframes drip-zoom-right-out {`
	`149`	`+@keyframes jfe-drip-table-motion-zoom-right-out {`
`150`	`150`	`0% {`
`151`	`151`	`transform: scale(1);`
`152`	`152`	`transform-origin: 100% 50%;`
`@@ -159,7 +159,7 @@`
`159`	`159`	`}`
`160`	`160`	`}`
`161`	`161`
`162`		`-@keyframes drip-zoom-down-in {`
	`162`	`+@keyframes jfe-drip-table-motion-zoom-down-in {`
`163`	`163`	`0% {`
`164`	`164`	`transform: scale(.8);`
`165`	`165`	`transform-origin: 50% 100%;`
`@@ -172,7 +172,7 @@`
`172`	`172`	`}`
`173`	`173`	`}`
`174`	`174`
`175`		`-@keyframes drip-zoom-down-out {`
	`175`	`+@keyframes jfe-drip-table-motion-zoom-down-out {`
`176`	`176`	`0% {`
`177`	`177`	`transform: scale(1);`
`178`	`178`	`transform-origin: 50% 100%;`