mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 20:49:14 +08:00
update motion animation-name
This commit is contained in:
parent
8a8790831a
commit
872b215930
@ -40,12 +40,12 @@
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active {
|
||||
animation-name: fadeIn;
|
||||
animation-name: antFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-name: antFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
@ -12,16 +12,16 @@
|
||||
}
|
||||
|
||||
.fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
|
||||
animation-name: fadeIn;
|
||||
animation-name: antFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-name: antFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes antFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
@keyframes antFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -9,12 +9,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.move-motion(move-up, moveUp);
|
||||
.move-motion(move-down, moveDown);
|
||||
.move-motion(move-left, moveLeft);
|
||||
.move-motion(move-right, moveRight);
|
||||
.move-motion(move-up, antMoveUp);
|
||||
.move-motion(move-down, antMoveDown);
|
||||
.move-motion(move-left, antMoveLeft);
|
||||
.move-motion(move-right, antMoveRight);
|
||||
|
||||
@keyframes moveDownIn {
|
||||
@keyframes antMoveDownIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveDownOut {
|
||||
@keyframes antMoveDownOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
@keyframes antMoveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftOut {
|
||||
@keyframes antMoveLeftOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightIn {
|
||||
@keyframes antMoveRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0 0;
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightOut {
|
||||
@keyframes antMoveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpIn {
|
||||
@keyframes antMoveUpIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpOut {
|
||||
@keyframes antMoveUpOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
|
@ -9,12 +9,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.slide-motion(slide-up, slideUp);
|
||||
.slide-motion(slide-down, slideDown);
|
||||
.slide-motion(slide-left, slideLeft);
|
||||
.slide-motion(slide-right, slideRight);
|
||||
.slide-motion(slide-up, antSlideUp);
|
||||
.slide-motion(slide-down, antSlideDown);
|
||||
.slide-motion(slide-left, antSlideLeft);
|
||||
.slide-motion(slide-right, antSlideRight);
|
||||
|
||||
@keyframes slideUpIn {
|
||||
@keyframes antSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpOut {
|
||||
@keyframes antSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownIn {
|
||||
@keyframes antSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownOut {
|
||||
@keyframes antSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftIn {
|
||||
@keyframes antSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftOut {
|
||||
@keyframes antSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightIn {
|
||||
@keyframes antSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightOut {
|
||||
@keyframes antSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
|
@ -9,9 +9,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.swing-motion(swing, swing);
|
||||
.swing-motion(swing, antSwing);
|
||||
|
||||
@keyframes swingIn {
|
||||
@keyframes antSwingIn {
|
||||
0%, 100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
@ -9,14 +9,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-motion(zoom, zoom);
|
||||
.zoom-motion(zoom-big, zoomBig);
|
||||
.zoom-motion(zoom-up, zoomUp);
|
||||
.zoom-motion(zoom-down, zoomDown);
|
||||
.zoom-motion(zoom-left, zoomLeft);
|
||||
.zoom-motion(zoom-right, zoomRight);
|
||||
.zoom-motion(zoom, antZoom);
|
||||
.zoom-motion(zoom-big, antZoomBig);
|
||||
.zoom-motion(zoom-up, antZoomUp);
|
||||
.zoom-motion(zoom-down, antZoomDown);
|
||||
.zoom-motion(zoom-left, antZoomLeft);
|
||||
.zoom-motion(zoom-right, antZoomRight);
|
||||
|
||||
@keyframes zoomIn {
|
||||
@keyframes antZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
@keyframes antZoomOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes zoomBigIn {
|
||||
@keyframes antZoomBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.8);
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomBigOut {
|
||||
@keyframes antZoomBigOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpIn {
|
||||
@keyframes antZoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpOut {
|
||||
@keyframes antZoomUpOut {
|
||||
0% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1);
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftIn {
|
||||
@keyframes antZoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftOut {
|
||||
@keyframes antZoomLeftOut {
|
||||
0% {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1);
|
||||
@ -103,7 +103,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightIn {
|
||||
@keyframes antZoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
@ -115,7 +115,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightOut {
|
||||
@keyframes antZoomRightOut {
|
||||
0% {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1);
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownIn {
|
||||
@keyframes antZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
@ -139,7 +139,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownOut {
|
||||
@keyframes antZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1);
|
||||
|
Loading…
Reference in New Issue
Block a user