Untitled

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" data-semver="3.0.3" data-require="bootstrap-css@*" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></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>
    <script data-require="angular-animate@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular-animate.js"></script>
    <style>
        .subview{
          outline: 1px solid #ccc;
        }
        .view-container{
            position:relative;
            border-top: 10px solid blue;
        }
        [ui-view]{
            min-height: 50px; 
            background-color: yellow;
            outline: 1px solid #ccc;
        }
        
        [ui-view].ng-enter, [ui-view].ng-leave{
            position: absolute;
            width: 100%;
            height: 100%;
            -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-leave{
            left: 0;
        }
        [ui-view].ng-leave-active{
            left: -100%;
        }
        
        [ui-view].ng-enter{
            left: 100%;
        }
        
        [ui-view].ng-enter-active{
            left: 0;
        }
    </style>
  </head>

  <body ng-app="app">
      <div class="container">
        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Slider</a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="#/view1">view1</a></li>
            <li><a href="#/view2">view2</a></li>
          </ul>
      </div>
          <div class="view-container">
              <div ui-view></div>
          </div>
          
     <script>
         var app = angular.module('app', [
            'ui.router',
            'ngAnimate'
        ]).value('$anchorScroll', angular.noop);
        
        app.config(function($stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
          $uiViewScrollProvider.useAnchorScroll()
            $stateProvider
                .state('view1', {
                    url:'/view1',
                    template:'<div class="container subview"><h4>view1</h4></div>'
                })
                .state('view2', {
                    url:'/view2',
                    template:'<div class="container subview"><h4>view2</h4></div>'
                });
            $urlRouterProvider.otherwise('/view1');
        });
        app.run();
     </script> 
  </body>

</html>

AngularJs, UI-Router and ngAnimate to create classic sliding view in mobile