ngAnimate and ui-router sliding view problem

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="http://code.angularjs.org/1.2.10/angular-animate.js" data-semver="1.2.10" data-require="angular-animate@*"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <style type="text/css" media="all">
      .nav{ padding: 1em; }
      .view-container{
        position:relative;
        border-top: 15px solid blue;
      }
      .view{
        padding: 1em;
        box-sizing: border-box;
        background-color: #eee;
      }
      .view.ng-enter, .view.ng-leave{
        position: absolute;
        width: 100%;
        -webkit-transition:all 5s ease-in-out;
        transition:all 5s ease-in-out;
      }
      .view.ng-enter{
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
      }
      .view.ng-enter-active{
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
      }
      .view.ng-leave{
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
      }
      .view.ng-leave-active{
        transform: translate3d(-100%, 0, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
      }
    </style>
    
  </head>

  <body>
  
    <nav>
      <a href="#/view1">view1</a> | 
      <a href="#/view2">view2</a>
    </nav>
    
    <div class="view-container">
      <div class="view" ui-view></div>
    </div>
      
    <script type="text/javascript" charset="utf-8">
    
      var app = angular.module("app", ['ui.router', 'ngAnimate']);
      app.config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/view1");
        $stateProvider
          .state("view1", {url:'/view1', template:'<div>view1</div>'})
          .state("view2", {url:'/view2', template:'<div>view2</div>'});
      });
      
    </script>
      
  </body>

</html>

# Example to illustrate problem in ui-router and ng-animate

Try to use ui-router and ng-animate to create the classic sliding view typical
in mobile app.