|
|
|
|
@import "../../../index";
|
|
|
|
|
|
|
|
|
|
.slide-motion(@className, @keyframeName) {
|
|
|
|
|
.make-motion(@className, @keyframeName);
|
|
|
|
|
.@{className}-enter,
|
|
|
|
|
.@{className}-appear {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
animation-timing-function: @ease-out-quint;
|
|
|
|
|
}
|
|
|
|
|
.@{className}-leave {
|
|
|
|
|
animation-timing-function: @ease-in-quint;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-motion(bi-slide-up, biSlideUp);
|
|
|
|
|
.slide-motion(bi-slide-down, biSlideDown);
|
|
|
|
|
.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;
|
|
|
|
|
// }
|
|
|
|
|
//});
|
