Angular iOS style animation

Angular iOS style animation panel slider

// Slide In From Right
// -------------------------------

@-webkit-keyframes slideInFromRight {
    from { -webkit-transform: translate3d(100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromRight {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

// Slide Out To Right
// -------------------------------

@-webkit-keyframes slideOutToRight {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slideOutToRight {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(100%); }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}



.ui-view-container {
  position: relative;
}


[ui-view].ng-enter {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  @include translate3d(100%, 0, 0);  
  @include animation-name(slideInFromRight);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
}

[ui-view].ng-enter-active {
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
  @include translate3d(0, 0, 0);
}

[ui-view].ng-leave {
  opacity: 1;
  @include animation-name(slideOutToRight);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
  @include transition(all ease-in-out $transition-duration);
  position: absolute;
  @include translate3d(-100%, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
}