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, $rootScope, $location) { var styles = { // appear from right front: '.enter-setup { position:absolute; -webkit-transition: 0.5s 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.5s ease-out all; -webkit-transform:translate3d(0,0,0)} .leave-setup.leave-start { position:absolute; -webkit-transform:translate3d(-100%,0,0) };', // appear from left back: '.enter-setup { position:absolute; -webkit-transition: 0.5s 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.5s ease-out all; -webkit-transform:translate3d(0,0,0)} .leave-setup.leave-start { position:absolute; -webkit-transform:translate3d(100%,0,0) };' }; $scope.direction = function(dir) { // update the animations classes $rootScope.style = styles[dir]; } $scope.go = function(path) { $location.path(path); } $scope.direction('front'); });
<style ng-bind-html-unsafe="style"></style> <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="direction('front');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="direction('back');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; }