// 要展示的页面，从右往左
// push 用
//     O <-- o
@keyframes page-right-in {
  0% {
    opacity: 0;
    transform: translateX(90%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// 要消失的页面，从左往右
// 返回用
// O --> o  
@keyframes page-right-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(90%);
  }
}

// 要展示的页面，从左往右
// 返回用
// o --> O
@keyframes page-left-in {
  0% {
    opacity: 0;
    transform: translateX(-90%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// 要消失的页面，从右往左
// push 用
// o <-- O
@keyframes page-left-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-90%);
  }
}

.page-slide-in-right--in {
  uni-page,
  .press-page__animation {
    animation: page-right-in var(--redirect-duration, 300ms) ease;
  }

  &.back uni-page,
  &.back .press-page__animation {
    animation: page-left-in var(--redirect-duration, 300ms) ease;
  }
}

.page-slide-in-right--out {
  uni-page,
  .press-page__animation {
    animation: page-left-out var(--redirect-duration, 300ms) ease;
  }

  &.back uni-page,
  &.back .press-page__animation {
    animation: page-right-out var(--redirect-duration, 300ms) ease;
  }
}

.page-slide-in-left--in {
  uni-page,
  .press-page__animation {
    animation: page-left-in var(--redirect-duration, 300ms) ease;
  }

  &.back uni-page,
  &.back .press-page__animation {
    animation: page-right-in var(--redirect-duration, 300ms) ease;
  }
}

.page-slide-in-left--out {
  uni-page,
  .press-page__animation {
    animation: page-right-out var(--redirect-duration, 300ms) ease;
  }

  &.back uni-page,
  &.back .press-page__animation {
    animation: page-left-out var(--redirect-duration, 300ms) ease;
  }
}