@naikus/stage/dist/stage.less

Check out the live [demo](https://codepen.io/naikus/project/full/AzkkER) (POC uses plain javascript and HTML)

.scale(@x: 1, @y: 1, @z: 1) {
  -moz-transform: scale3d(@x, @y, @z);
  -webkit-transform: scale3d(@x, @y, @z);
  -o-transform: scale3d(@x, @y, @z);
  -ms-transform: scale3d(@x, @y, @z);
  transform: scale3d(@x, @y, @z);
}

.translate(@x: 0, @y: 0, @z: 0) {
  -moz-transform: translate3d(@x, @y, @z);
  -webkit-transform: translate3d(@x, @y, @z);
  -o-transform: translate3d(@x, @y, @z);
  -ms-transform: translate3d(@x, @y, @z);
  transform: translate3d(@x, @y, @z);
}

.translateAndScale(@tx: 0, @ty: 0, @tz: 0, @sx: 1, @sy: 1) {
  -moz-transform: translate3d(@tx, @ty, @tz) scale(@sx, @sy);
  
  // In older webkits on android, this causes the whole page to jump up and down
  // when typing, in input fields
  -webkit-transform: translate3d(@tx, @ty, @tz) scale(@sx, @sy);
  // -webkit-transform: translate(@x, @y) scale(@sx, @sy);
  -o-transform: translate3d(@tx, @ty, @tz) scale(@sx, @sy);
  -ms-transform: translate3d(@tx, @ty, @tz) scale(@sx, @sy);
  transform: translate3d(@tx, @ty, @tz) scale(@sx, @sy);
}

.transformNone {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}

.transition-transform(@time: 200ms, @anim: ease, @delay: 0ms) {
  -moz-transition: -moz-transform @time @anim @delay;
  -webkit-transition: -webkit-transform @time @anim @delay;
  -o-transition: -o-transform @time @anim @delay;
  -ms-transition: -ms-transform @time @anim @delay;
  transition: transform @time @anim @delay;
}

.transition(@property, @time: 200ms, @easing: ease, @delay: 0ms) {
  -moz-transition: @property @time @easing @delay;
  -webkit-transition: @property @time @easing @delay;
  -o-transition: @property @time @easing @delay;
  -ms-transition: @property @time @easing @delay;
  transition: @property @time @easing @delay;
}


@bezier-func: cubic-bezier(0.19, 1, 0.22, 1);



/* ------------------------------ Default view and viewport styles ------------------------------ */
.stage-viewport {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.stage-view {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  
  will-change: transform;
  transform: translateZ(0);
  display: none;
  /* Avoid flickering in webkit browsers, thanks stackoverflow */
  // -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  
  &.showing {
    display: block !important;
  }
}


/* ------------------------ Various outofthebox transitions for views  -------------------------- */
.stage-view {
  &.pop {
    z-index: 99;
  }
  &.in {
    z-index: 98;
    /* 
    * This will allow the view to have fixed elements. If the value is 'transform' the fixed
    * elements will scroll 
    */
    will-change: auto;
  }
  &.stack {
    z-index: 97;
  }
}

.slide {
  .stage-view {
    .translate(100%);
    .transition-transform(490ms, @bezier-func);
    // transition: transform 490ms @bezier-func, opacity 500ms @bezier-func;
    // opacity: 0.99;
    
    &.pop {
      .translate(100%);
    }

    &.in {
      .transformNone;
      // opacity: 1;
    }

    &.unstack {
      // opacity: 1;
    }

    &.stack {
      .translate(-50%);
      // .transition-transform(500ms, @bezier-func);
      // opacity: 0.5
    }
  }
}

.fade {
  .stage-view {
    opacity: 0;

    -moz-transition: opacity 350ms ease;
    -webkit-transition: opacity 350ms ease;
    -o-transition: opacity 350ms ease;
    -ms-transition: opacity 350ms ease;
    transition: opacity 350ms ease;

    &.pop {
      opacity: 0;
    }
    &.in {
      opacity: 1;
    }
    &.stack {
      opacity: 0;
    }
  }
}

.fancy {
  .stage-view {
    .translateAndScale(100%);
    .transition-transform(500ms, @bezier-func);

    &.pop {
      .translate(100%);
    }
    &.in {
      .transformNone;
    }
    &.stack {
      .translateAndScale(-70%, 0, 0, 0.8, 0.8);
      .transition-transform(650ms, @bezier-func);
    }
  }
}

.lollipop {
  .stage-view {
    opacity: 0;
    .translate(0, 80px);

    -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
    -o-transition: -o-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
    -ms-transition: -ms-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
    transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
    
    &.pop {
      .translate(0, 80px);
      // opacity: 0;
    }

    &.in {
      // .translateY(0); Fixed position elements won't work with this
      .transformNone;
      opacity: 1;
    }

    &.stack {
      .translate(0, -50px);
      opacity: 0.8;
      // For accurate lollipop and above transition emulation, enable below
      // .translate(0, -1px);
      // opacity: 0.95;
    }
  }
}

.slide-up {
  .stage-view {
    // .translateAndScale(0, 100%);
    .translate(0, 100%);
    .transition-transform(600ms, @bezier-func);

    &.pop {
      .translate(0, 100%);
    }
    &.in {
      .transformNone;
    }
    &.stack {
      .translateAndScale(0, -10px, 0, 0.98, 0.98);
      // .translate(0, -0.1px, 0);
      .transition-transform(650ms, @bezier-func);
    }
  }
}

.slide-down {
  .stage-view {
    // .translateAndScale(0, -100%);
    .translate(0, -100%);
    .transition-transform(600ms, @bezier-func);

    &.pop {
      .translate(0, -100%);
    }
    &.in {
      .transformNone;
    }
    &.stack {
      .translateAndScale(0, 10px, 0, 0.98, 0.98);
      // .translate(0, 0.1px, 0);
      .transition-transform(650ms, @bezier-func);
    }
  }
}

.pop-out {
  .stage-view {
    opacity: 0;
    .translateAndScale(0, 0, 0, 0.9, 0.9);
    -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
    -o-transition: -o-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
    -ms-transition: -ms-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
    transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;

    &.in {
      .transformNone;
      opacity: 1;
    }
    &.stack {
      .translateAndScale(0, 0, 0, 1.1, 1.1);
      opacity: 0;
    }
    &.pop {
      .translateAndScale(0, 0, 0, 0.9, 0.9);
      opacity: 0;
    }
  }
}