The initial animation only occurs the first time.
I am utilizing Angularjs version 1.2.22
Here is the CSS that I am using :
.ng-enter {
animation: bounceInUp 2s;
}
.ng-leave {
animation: bounceOutUp 2s;
}
And this is the route configuration :
var app = angular.module('app', ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/horodateur/currentuser', {
templateUrl: 'partials/horodateur/currentuser.html',
controller: 'CurrentUserController'
}).
when('/horodateur/keypad', {
templateUrl: 'partials/horodateur/keypad.html',
controller: 'KeypadController'
}).
otherwise({
redirectTo: '/horodateur/currentuser'
});
}]);
Upon initial display of the partial view, the entering animation is visible.
A button within this partial view triggers a function in its controller to load another view:
app.controller('CurrentUserController',
function ($scope, $location) {
$scope.showKeypad = function () {
$location.path('/horodateur/keypad');
}
});
When switching views, the leaving animation is shown, but subsequent renderings of the second partial view do not trigger the entering animation.
If I navigate back to the first partial view using the browser's back button, I can still observe the leaving animation, but not the entering animation for the other partial view.
It appears there may be some confusion with how the partial views are loaded or rendered...
Any insights on what might be missing?