.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%);
// }