AngularJS Slide routing

var app = angular.module('plunker', 
['ui.router', 'ngAnimate']);

    app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('view1', {
          url: '/view1',
          templateUrl: 'page1.html'
        })
        .state('view2', {
          url: '/view2',
          templateUrl: 'page2.html'
        });
      $urlRouterProvider.otherwise('/view1');
    });


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.slide = 'slide-left';
});

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.2.9"></script>
  <script src="https://rawgit.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>
  <script src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <ul class="nav navbar-nav">
    <li><a href="#/view1">view1</a>
    </li>
    <li><a href="#/view2">view2</a>
    </li>
  </ul>


  <section class="container">
    <div ui-view class="slide-left"></div>
  </section>

</body>
</html>

/* Put your css in here */
*,
*:after,
*:before {
	@include prefix("box-sizing","border-box",webkit moz);
}
html {
	font-size: 62.5%;
	min-height: 100%;
  position: relative;

}


	body {
		font-size: 140%;
		line-height: 1.5;

		margin: 0;
		padding: 0 0;
		margin-bottom: 60px;
	}

.container {

  background: #f0f0f0;
  max-width: 430px;
	margin: 0 auto;
	
	display: block;
	float: none;
	overflow: hidden;
	position: relative;
	width:100%;
	height:400px;
	border: 1px solid black;
}

form {
  background: #f0f0f0;
  height: 350px;
  padding: 10px;
  font-size: 1.4em;
  position:absolute;
}

input {
  padding: 10px;
  width: 80%;
  height: 15px;
  margin-top: 15px;
}

.slide-left.ng-enter,
.slide-left.ng-leave {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  -webkit-transition: -webkit-transform .7s ease-in-out;
  transition: transform .7s ease-in-out;
}

.slide-left.ng-enter {
  z-index: 101;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.slide-left.ng-enter.ng-enter-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.slide-left.ng-leave {
  z-index: 100;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

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

<form>
  <p>From page 1</p>
  <input type="text" name="firstname" placeholder="Firstname">
  <input type="text" name="name" placeholder="Surname">
  <input type="text" name="name" placeholder="DOB">
  <input type="text" name="gender" placeholder="Male / Female">
  <input type="text" name="age" placeholder="Age">
</form>

<form>
  <p>From page 2</p>
  <input type="text" name="hosuenumber" placeholder="House Number">
  <input type="text" name="street" placeholder="Street">
  <input type="text" name="city" placeholder="City">
  <input type="text" name="country" placeholder="Country">
</form>