2
rated 0 times
[
3]
[
1]
/ answers: 1 / hits: 24936
/ 11 Years ago, tue, december 17, 2013, 12:00:00
I try to animate the change of a ng-view div in AngularJS.
So my div inside my index.html file looks like:
<div ng-view></div>
I have another html-file (view1.html) with just divs inside.
My app.js with the routing looks like:
app.config(function($routeProvider) {
$routeProvider
.when('/sites/:templateID',
{
controller: 'simpleController',
templateUrl:'templates/question.html'
})
});
I am changing the path with a click on a button, and call this:
$location.path(/sites/ + nextID);
The URL changes of the site, and only the ng-view-div gets updated. But when i am applying a ng-animation to it:
<div class=content data-ng-view ng-animate={enter: 'animate-enter', leave: 'animate-leave'}></div>
It doesn't work. I included AngularJS 1.2.5, the animate-js file inside my index.html and also my CSS:
.animate-enter, .animate-leave {
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
.animate-enter {
left: -100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active {
left: 100%;
}
Is there a way to animate the ng-view change through route-(URL)-changing?
More From » css
