问题
I can't seem to get ng-animate to work in an existing 1.2 application. I've followed the check list in the API, but it isn't applying the appropriate animate classes.
I feel like I must be missing something silly in the installation process. Here's what I've done:
1 - I'm loading angular and angular-animate in the head of my document here:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <!-- load angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> <!-- load angular animate -->
2 - I am adding the module as a dependency in my app declaration here:
var app = angular.module('app', ['mainCtrl', 'mainService', 'ngRoute', 'ngAnimate', 'sortable', 'services.breadcrumbs']);
And that's it! It should be working right? All I get when using ng-show is the ng-hide class. I was expecting to get the ng-hide-add and ng-hide-remove classes as well, but nothing has changed.
What am I missing? Thanks for the help.
回答1:
Set CSS rules to handle the animations; otherwise, you won't see the changes you're expecting to the class as you inspect the element.
Example:
.ng-hide-add,
.ng-hide-remove {
transition:0.5s linear all;
display:block!important;
opacity:1;
}
.ng-hide {
opacity:0;
}
Demo
回答2:
I don't think this should count as an answer, but it works just fine if I use angular's beta release (1.3.0-beta.5). I still would like to know why the stable release is not working properly, but the beta release is...
回答3:
If you are working with ui-view
instead of ng-view
, you might have to add ng-animate-children attribute
to the ui-view
tag within which the html template
is loading. For ex:
<ui-view ng-animate-children></ui-view>
It worked for me as I was unable to animate ng-repeat
. Once I added this attribute
, the animations began.
Hope this helps. Good Luck.
来源:https://stackoverflow.com/questions/23894628/installation-of-nganimate-module-not-working