update motion animation-name

This commit is contained in:
jljsj 2015-09-15 15:00:23 +08:00
parent 8a8790831a
commit 872b215930
6 changed files with 50 additions and 50 deletions

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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%);

View File

@ -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%;

View File

@ -9,9 +9,9 @@
}
}
.swing-motion(swing, swing);
.swing-motion(swing, antSwing);
@keyframes swingIn {
@keyframes antSwingIn {
0%, 100% {
transform: translateX(0px);
}

View File

@ -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);