angular slide in out effect

index

<section ui-view class="view"></section>

slideInOut.css

.view {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.view.ng-enter {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.view.ng-enter.ng-enter-active, .view.ng-leave {
  position: absolute;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.view.ng-leave.ng-leave-active {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}