@pi0/framework7/src/components/page/page-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @duration: 250ms;
  .page {
    background: #fff;
    contain: strict;
  }
  .page-next {
    transform: translate3d(0, 56px, 0);
    opacity: 0;
    pointer-events: none;
  }

  // Animations
  .page-transitioning {
    transition-duration: @duration;
  }
  .router-transition-forward, .router-transition-backward {
    .page {
      pointer-events: none;
    }
    .page-next, .page-current {
      will-change: transform, opacity;
    }
  }

  .router-transition-css-forward {
    .page-next {
      animation: md-page-next-to-current @duration forwards;
    }
    .page-current {
      animation: none;
    }
  }
  .router-transition-css-backward {
    .page-current {
      animation: md-page-current-to-next @duration forwards;
    }
    .page-previous {
      animation: none;
    }
  }
}
@keyframes md-page-next-to-current {
  from {
    transform: translate3d(0, 56px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@keyframes md-page-current-to-next {
  from {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 56px, 0);
    opacity: 0;
  }
}