I've been working on a simple AngularJS application and I'm trying to add animations between my views. However, for some reason, the animation is not triggering despite following the tutorial on the AngularJS website. There are no errors in the console, so I'm clearly missing something.
router.js
(function (app) {
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
controller: 'homeController',
templateUrl: 'home.html'
}).when('/product', {
controller: 'productController',
templateUrl: 'products.html'
}).otherwise({
redirectTo: '/home'
});
});
}(angular.module('myApp', ['ngRoute'])));
homeController.js (productcontroller is basically the same)
(function (app) {
var homeController = function ($scope) {
$scope.title = "Test";
}
app.controller('homeController', ["$scope", homeController]);
}(angular.module('myApp')));
I have set up my module registration in app.js:
(function () {
angular.module('myApp', ['ngAnimate']);
}());
In my index.html file, I have included these resources:
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="myApp/app.js"></script>
<script src="myApp/router.js"></script>
<script src="myApp/controllers/homeController.js"></script>
<script src="myApp/controllers/productController.js"></script>
Despite everything else working fine, I can't seem to get the animations to work. I have added the animation code in index.html as follows:
<style type="text/css">
.reveal-animation.ng-enter {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
@-webkit-keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
@keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
</style>
<div ng-view class="reveal-animation"></div>
I'm at a loss as to why the animations are not functioning correctly.
Version: Angular version: 1.2.5 singularity-expansion
Browser: tested in Chrome, FF and IE