modo-mobile
Version:
A mobile UI toolkit, based on React
91 lines (79 loc) • 1.59 kB
text/less
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter,
.@{className}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{className}-leave {
animation-timing-function: linear;
}
}
.fade-motion(fade, mFade);
@keyframes mFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes mFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
// .fade-enter-active,
// .fade-leave-active {
// transition: opacity 0.3s;
// will-change: opacity;
// }
// .fade-enter,
// .fade-leave-to,
// .fade-leave-active {
// opacity: 0;
// }
// .slide-up-enter-active,
// .slide-up-leave-active,
// .slide-down-enter-active,
// .slide-down-leave-active,
// .bottom .show {
// transform: translateY(0);
// }
// .slide-up-enter,
// .slide-up-leave-to {
// transform: translateY(70%);
// }
// .slide-up-leave-active {
// transform: translateY(100%);
// }
// .slide-down-enter,
// .slide-down-leave-to {
// transform: translateY(-70%);
// }
// .slide-down-leave-active {
// transform: translateY(-100%);
// }
// .slide-left-enter-active,
// .slide-left-leave-active,
// .slide-right-enter-active,
// .slide-right-leave-active {
// transform: translateX(0);
// }
// .slide-left-enter,
// .slide-left-leave-to {
// transform: translateX(70%);
// }
// .slide-left-leave-active {
// transform: translateX(100%);
// }
// .slide-right-enter,
// .slide-right-leave-to {
// transform: translateX(-70%);
// }
// .slide-right-leave-active {
// transform: translateX(-100%);
// }