diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less index 9ad3bbaea..d51a68c75 100644 --- a/src/less/core/utils/motion/fade.less +++ b/src/less/core/utils/motion/fade.less @@ -14,12 +14,22 @@ .fade-motion(bi-fade, biFade); -//.keyframes(biFadeIn, { -// 0% {opacity: 0;} -// 100% {opacity: 1;} -//}); -// -//.keyframes(biFadeOut, { -// 0% {opacity: 1;} -// 100% {opacity: 0;} -//}); +.keyframes(biFadeIn, { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +}); + +.keyframes(biFadeOut, { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +}); diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less index decc9f33d..3024c2a8b 100644 --- a/src/less/core/utils/motion/move.less +++ b/src/less/core/utils/motion/move.less @@ -17,42 +17,114 @@ .move-motion(bi-move-left, biMoveLeft); .move-motion(bi-move-right, biMoveRight); -//.keyframes(biMoveDownIn, { -// 0% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;} -// 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} -//}); -// -//.keyframes(biMoveDownOut, { -// 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} -// 100% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;} -//}); -// -//.keyframes(biMoveLeftIn, { -// 0% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;} -// 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} -//}); -// -//.keyframes(biMoveLeftOut, { -// 0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} -// 100% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;} -//}); -// -//.keyframes(biMoveRightIn, { -// 0% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;} -// 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} -//}); -// -//.keyframes(biMoveRightOut, { -// 0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} -// 100% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;} -//}); -// -//.keyframes(biMoveUpIn, { -// 0% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;} -// 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} -//}); -// -//.keyframes(biMoveUpOut, { -// 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} -// 100% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;} -//}); +.keyframes(biMoveDownIn, { + 0% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +}); + +.keyframes(biMoveDownOut, { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } +}); + +.keyframes(biMoveLeftIn, { + 0% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +}); + +.keyframes(biMoveLeftOut, { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } +}); + +.keyframes(biMoveRightIn, { + 0% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +}); + +.keyframes(biMoveRightOut, { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } +}); + +.keyframes(biMoveUpIn, { + 0% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +}); + +.keyframes(biMoveUpOut, { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } +}); diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less index 77909bbbc..0fa6567a4 100644 --- a/src/less/core/utils/motion/slide.less +++ b/src/less/core/utils/motion/slide.less @@ -17,114 +17,114 @@ .slide-motion(bi-slide-left, biSlideLeft); .slide-motion(bi-slide-right, biSlideRight); -//.keyframes(biSlideUpIn, { -// 0% { -// transform: scaleY(0.8); -// transform-origin: 0% 0%; -// opacity: 0; -// } -// -// 100% { -// transform: scaleY(1); -// transform-origin: 0% 0%; -// opacity: 1; -// } -//}); -// -//.keyframes(biSlideUpOut, { -// 0% { -// transform: scaleY(1); -// transform-origin: 0% 0%; -// opacity: 1; -// } -// -// 100% { -// transform: scaleY(0.8); -// transform-origin: 0% 0%; -// opacity: 0; -// } -//}); -// -//.keyframes(biSlideDownIn, { -// 0% { -// transform: scaleY(0.8); -// transform-origin: 100% 100%; -// opacity: 0; -// } -// -// 100% { -// transform: scaleY(1); -// transform-origin: 100% 100%; -// opacity: 1; -// } -//}); -// -//.keyframes(biSlideDownOut, { -// 0% { -// transform: scaleY(1); -// transform-origin: 100% 100%; -// opacity: 1; -// } -// -// 100% { -// transform: scaleY(0.8); -// transform-origin: 100% 100%; -// opacity: 0; -// } -//}); -// -//.keyframes(biSlideLeftIn, { -// 0% { -// transform: scaleX(0.8); -// transform-origin: 0% 0%; -// opacity: 0; -// } -// -// 100% { -// transform: scaleX(1); -// transform-origin: 0% 0%; -// opacity: 1; -// } -//}); -// -//.keyframes(biSlideLeftOut, { -// 0% { -// transform: scaleX(1); -// transform-origin: 0% 0%; -// opacity: 1; -// } -// -// 100% { -// transform: scaleX(0.8); -// transform-origin: 0% 0%; -// opacity: 0; -// } -//}); -// -//.keyframes(biSlideRightIn, { -// 0% { -// transform: scaleX(0.8); -// transform-origin: 100% 0%; -// opacity: 0; -// } -// -// 100% { -// transform: scaleX(1); -// transform-origin: 100% 0%; -// opacity: 1; -// } -//}); -// -//.keyframes(biSlideRightOut, { -// 0% { -// transform: scaleX(1); -// transform-origin: 100% 0%; -// opacity: 1; -// } -// -// 100% { -// transform: scaleX(0.8); -// transform-origin: 100% 0%; -// opacity: 0; -// } -//}); +.keyframes(biSlideUpIn, { + 0% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } +}); + +.keyframes(biSlideUpOut, { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +}); + +.keyframes(biSlideDownIn, { + 0% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } +}); + +.keyframes(biSlideDownOut, { + 0% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } +}); + +.keyframes(biSlideLeftIn, { + 0% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } +}); + +.keyframes(biSlideLeftOut, { + 0% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +}); + +.keyframes(biSlideRightIn, { + 0% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } +}); + +.keyframes(biSlideRightOut, { + 0% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } +}); diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less index c16ce98a9..2407b8428 100644 --- a/src/less/core/utils/motion/zoom.less +++ b/src/less/core/utils/motion/zoom.less @@ -29,133 +29,152 @@ .zoom-motion(bi-zoom-left, biZoomLeft); .zoom-motion(bi-zoom-right, biZoomRight); -//.keyframes(biZoomIn, { -// 0% { -// transform: scale(0.2); -// opacity: 0; -// } -// -// 100% { -// transform: scale(1); -// opacity: 1; -// } -//}); -// -//.keyframes(biZoomOut, { -// 0% { transform: scale(1); } -// 100% { transform: scale(0.2); opacity: 0; } -//}); +.keyframes(biZoomIn, { + 0% { + transform: scale(0.2); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +}); + +.keyframes(biZoomOut, { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.2); + opacity: 0; + } +}); .keyframes(biZoomBigIn, { - 0% {transform: scale(0.8);opacity: 0;} - 100% {transform: scale(1);opacity: 1;} + 0% { + transform: scale(0.8); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } }); .keyframes(biZoomBigOut, { - 0% {transform: scale(1);} - 100% {transform: scale(0.8);opacity: 0;} + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.8); + opacity: 0; + } +}); + +.keyframes(biZoomUpIn, { + 0% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 0%; + } +}); + +.keyframes(biZoomUpOut, { + 0% { + transform: scale(1); + transform-origin: 50% 0%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } +}); + +.keyframes(biZoomLeftIn, { + 0% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 0% 50%; + } }); -//.keyframes(biZoomUpIn, { -// 0% { -// transform: scale(0.8); -// transform-origin: 50% 0%; -// opacity: 0; -// } -// -// 100% { -// transform: scale(1); -// transform-origin: 50% 0%; -// } -//}); -// -//.keyframes(biZoomUpOut, { -// 0% { -// transform: scale(1); -// transform-origin: 50% 0%; -// } -// -// 100% { -// transform: scale(0.8); -// transform-origin: 50% 0%; -// opacity: 0; -// } -//}); -// -//.keyframes(biZoomLeftIn, { -// 0% { -// transform: scale(0.8); -// transform-origin: 0% 50%; -// opacity: 0; -// } -// -// 100% { -// transform: scale(1); -// transform-origin: 0% 50%; -// } -//}); -// -//.keyframes(biZoomLeftOut, { -// 0% { -// transform: scale(1); -// transform-origin: 0% 50%; -// } -// -// 100% { -// transform: scale(0.8); -// transform-origin: 0% 50%; -// opacity: 0; -// } -//}); -// -//.keyframes(biZoomRightIn, { -// 0% { -// transform: scale(0.8); -// transform-origin: 100% 50%; -// opacity: 0; -// } -// -// 100% { -// transform: scale(1); -// transform-origin: 100% 50%; -// } -//}); -// -//.keyframes(biZoomRightOut, { -// 0% { -// transform: scale(1); -// transform-origin: 100% 50%; -// } -// -// 100% { -// transform: scale(0.8); -// transform-origin: 100% 50%; -// opacity: 0; -// } -//}); -// -//.keyframes(biZoomDownIn, { -// 0% { -// transform: scale(0.8); -// transform-origin: 50% 100%; -// opacity: 0; -// } -// -// 100% { -// transform: scale(1); -// transform-origin: 50% 100%; -// } -//}); -// -//.keyframes(biZoomDownOut, { -// 0% { -// transform: scale(1); -// transform-origin: 50% 100%; -// } -// -// 100% { -// transform: scale(0.8); -// transform-origin: 50% 100%; -// opacity: 0; -// } -//}); +.keyframes(biZoomLeftOut, { + 0% { + transform: scale(1); + transform-origin: 0% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } +}); + +.keyframes(biZoomRightIn, { + 0% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 100% 50%; + } +}); + +.keyframes(biZoomRightOut, { + 0% { + transform: scale(1); + transform-origin: 100% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } +}); + +.keyframes(biZoomDownIn, { + 0% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 100%; + } +}); + +.keyframes(biZoomDownOut, { + 0% { + transform: scale(1); + transform-origin: 50% 100%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } +});