/* ==================================================
 * 由 Transition.scss 统一管理全局Transition, Animation
 * ================================================== */

// Page Turn on Transian Effect
.turn-on {
  &-enter {
    transform: translate3d(100%, 0, 0);
  }
  //&-leave-to {
  //  transform: translate3d(-20%, 0, 0);
  //}
  &-enter-active {
    z-index: 2;
  }
  &-enter-active, &-leave-active  {
    transition: transform .4s ease;
  }
}

// Page Turn Off Transian Effect
.turn-off {
  //&-enter {
  //  transform: translate3d(-20%, 0, 0);
  //}
  &-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  &-leave-active {
    z-index: 2;
  }
  &-enter-active, &-leave-active  {
    transition: transform .4s ease;
  }
}

// Page Turn on Transian Effect
.push-on {
  &-enter {
    transform: translate3d(0, 60%, 0);
  }
  //&-leave-to {
  //  transform: translate3d(0, 0, 0);
  //}
  &-enter-active, &-leave-active  {
    transition: transform .2s ease;
  }
}

// Page Turn Off Transian Effect
.push-off {
  //&-enter {
  //  transform: translate3d(0, 0, 0);
  //}
  &-leave-to {
    transform: translate3d(0, 100%, 0);
  }
  &-leave-active {
    z-index: 2;
  }
  &-enter-active, &-leave-active  {
    transition: transform .2s ease;
  }
}

// Page Turn on Transian Effect
.scale-on {
  &-enter {
    transform: scale(0.8);
    opacity: 0.5;
  }
  //&-leave-to {
  //}
  &-enter-active {
    z-index: 2;
  }
  &-enter-active, &-leave-active  {
    transition: all .3s ease;
  }
}

// Page Turn Off Transian Effect
.scale-off {
  //&-enter {
  //}
  &-leave-to {
    transform: scale(0.8);
    opacity: 0;
  }
  &-leave-active {
    z-index: 2;
  }
  &-enter-active, &-leave-active  {
    transition: all .3s ease;
  }
}

// Page Turn on Transian Effect
.fade-on {
  &-enter {
    opacity: 0;
  }
  &-leave-to {
  }
  &-enter-active, &-leave-active  {
    transition: opacity .3s ease;
  }
}

// Page Turn Off Transian Effect
.fade-off {
  &-enter {
  }
  &-leave-to {
    //opacity: 0;
  }
  &-leave-active {
    //z-index: 2;
  }
  &-enter-active, &-leave-active  {
    //transition: opacity .3s ease;
  }
}