var app = angular.module('demo', []); app.config(function ($routeProvider) { $routeProvider.when('/one', { templateUrl: 'page1.html' }) .when('/two', { templateUrl: 'page2.html' }) .otherwise({ redirectTo: '/one' }); }); app.controller('MainCtrl', function ($scope, $location) { $scope.go = function (path) { $location.path(path); } });
<ng-view ng-animate="{enter: 'enter', leave: 'leave'}"></ng-view> <script type="text/ng-template" id="page1.html"> <div class="page page1"><b> page 1 </b><br><br> <button ng-click="go('/two')" >go page 2</button> </div> </script> <script type="text/ng-template" id="page2.html"> <div class="page page2" > <b> page 2 </b><br><br> <button ng-click="go('/one')" >go page 1</button> </div> </script>
* { font-family:'Droid Sans', sans-serif; } body { overflow:hidden; margin:0; padding:0; } .page { width:100%; height:200px; padding:20px; } .page1 { background-color: #ccc; } .page2 { background-color: #eee; } .enter-setup { position:absolute; -webkit-transition: 0.3s ease-out all; -webkit-transform:translate3d(100%,0,0) ; } .enter-setup.enter-start { position:absolute; -webkit-transform:translate3d(0,0,0) ; } .leave-setup { position:absolute; -webkit-transition: 0.3s ease-out all; -webkit-transform:translate3d(0,0,0); } .leave-setup.leave-start { position:absolute; -webkit-transform:translate3d(-100%,0,0); }