Skip to content

Instantly share code, notes, and snippets.

@tgeorgiev tgeorgiev/app.js
Created Nov 26, 2013

Embed
What would you like to do?
Animate ngView transitions in AngularJS
var resolve = {
delay: function($q, $timeout) {
console.log("delay");
var delay = $q.defer();
$timeout(delay.resolve, 0, false);
return delay.promise;
}
};
angular.module('viewTransitionApp', ['ngRoute', 'ngAnimate'])
.config(function ($routeProvider) {
$routeProvider
.when('/viewA', {
templateUrl: 'viewA.html',
resolve: resolve
})
.when('/viewA/:viewAB', {
templateUrl: 'viewAB.html',
resolve: resolve
})
.when('/viewA/:viewAB/:viewABC', {
templateUrl: 'viewABC.html',
resolve: resolve
})
.when('/viewA/:viewAB/:viewABC/:viewABCD', {
templateUrl: 'viewABCD.html',
resolve: resolve
})
.otherwise({
redirectTo: '/viewA'
});
})
.controller('MainCtrl', function ($scope) {
var oldLocation = '';
$scope.$on('$routeChangeStart', function(angularEvent, next) {
console.log("routeChangeStart");
var isDownwards = true;
if (next && next.$$route) {
var newLocation = next.$$route.originalPath;
if (oldLocation !== newLocation && oldLocation.indexOf(newLocation) !== -1) {
isDownwards = false;
}
oldLocation = newLocation;
}
$scope.isDownwards = isDownwards;
});
});
<!doctype html>
<head>
<meta charset="utf-8">
<title>ngView transition</title>
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="viewTransitionApp">
<div ng-controller="MainCtrl">
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}"></div>
</div>
<script type="text/ng-template" id="viewA.html">
<div class="view view-A">
<p>View A</p>
<ul>
<li><a href="#viewA/viewAB1">View AB.1</a></li>
<li><a href="#viewA/viewAB2">View AB.2</a></li>
<li><a href="#viewA/viewAB3">View AB.3</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="viewAB.html">
<div class="view view-AB">
<p>View AB</p>
<a href="#viewA">Go back</a>
<ul>
<li><a href="#viewA/viewAB1/viewABC1">View ABC.1</a></li>
<li><a href="#viewA/viewAB1/viewABC2">View ABC.2</a></li>
<li><a href="#viewA/viewAB1/viewABC3">View ABC.3</a></li>
<li><a href="#viewA/viewAB1/viewABC4">View ABC.4</a></li>
<li><a href="#viewA/viewAB1/viewABC5">View ABC.5</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="viewABC.html">
<div class="view view-ABC">
<p>View ABC</p>
<a href="#viewA/viewAB1">Go back</a>
<ul>
<li><a href="#viewA/viewAB1/viewABC1/viewABCD1">View ABCD.1</a></li>
<li><a href="#viewA/viewAB1/viewABC1/viewABCD2">View ABCD.2</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="viewABCD.html">
<div class="view view-ABCD">
<p>View ABCD</p>
<a href="#viewA/viewAB1/viewABC1">Go back</a>
</div>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<script src="app.js"></script>
</body>
</html>
.slide {
position: relative;
}
.slide.ng-leave, .slide.ng-enter {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
position:absolute;
left: 0;
right: 0;
}
.slide.left.ng-enter,
.slide.right.ng-leave.ng-leave-active {
left: 100%;
opacity: 0;
}
.slide.left.ng-enter.ng-enter-active,
.slide.left.ng-leave,
.slide.right.ng-enter.ng-enter-active,
.slide.right.ng-leave {
left:0;
opacity: 1;
}
.slide.left.ng-leave.ng-leave-active,
.slide.right.ng-enter {
left: -100%;
opacity: 0;
}
.view {
width: 500px;
height: 300px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
}
.view-A {
background-color: #CC71FF;
}
.view-AB {
background-color: #328AE8;
}
.view-ABC {
background-color: #44FF8A;
}
.view-ABCD {
background-color: #E8E832;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.