为什么ngAnimate不能在div上工作？

[weixin_38048154]

因此，在我的webapp中，我有一个包含<div>的列表。我想给他们添加一个不错的动画。所以我开始工作，并将ngAnimate添加到app.js文件。我还将ng-animate="'animate'"添加到<div>。然后我重新加载了我的web应用程序，发现它不起作用。根本没有动画。我使用ngAnimate和AngularJS版本1.2.4 我添加了一些下面的代码： <div class="col-use-list sidebar"> <div class="col-md-12 sidebar-element" ng-animate="'animate'" ng-repeat="song in songs | orderBy:[filter]:reverse" style="margin-bottom: 10px;"> <div class="col-use-artwork" style="padding-left: 0px;"> <img alt="{{ song.name }}" src="img/artwork/{{ song.image }}.png" class="sidebar-song-image"> </div> <div class="col-use-name"> <p>{{ song.name }}</p> </div> <div class="col-use-select"> <input type="radio" name="checkbox" ng-value="song.image" id="{{ song.image }}" class="sidebar-checkbox" /> <label for="{{ song.image }}" class="sidebar-checkbox-label"></label> </div> </div> <div style='clear:both;height: 0;'></div> </div> app.js var SongApp = angular .module('SongApp', [ "ui.router", "ngUpload", "pascalprecht.translate", "ngAnimate" ]); CSS .animate-enter, .animate-leave { -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; position: relative; display: block; } .animate-leave.animate-leave-active, .animate-enter { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); height: 0px; opacity: 0; } .animate-enter.animate-enter-active, .animate-leave { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); height: 30px; opacity: 1; }

[weixin_38052463]

阅读文档对于angular v1.2.4，ng-animate服务的使用是不同的，现在您应该指定带有动画的类作为普通类。 所以尝试这个： HTML： <div class="col-use-list sidebar"> <div class="col-md-12 sidebar-element animate" ng-repeat="song in songs | orderBy:[filter]:reverse" style="margin-bottom: 10px;"> <div class="col-use-artwork" style="padding-left: 0px;"> <img alt="{{ song.name }}" src="img/artwork/{{ song.image }}.png" class="sidebar-song-image"> </div> <div class="col-use-name"> <p>{{ song.name }}</p> </div> <div class="col-use-select"> <input type="radio" name="checkbox" ng-value="song.image" id="{{ song.image }}" class="sidebar-checkbox" /> <label for="{{ song.image }}" class="sidebar-checkbox-label"></label> </div> </div> <div style='clear:both;height: 0;'></div> </div> CSS： .animate.ng-enter, .animate.ng-leave { -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; position: relative; display: block; } .animate.ng-leave, animate.ng-leave-active, .animate.ng-enter { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); height: 0px; opacity: 0; } .animate.ng-enter, animate.ng-enter-active, .animate.ng-leave { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); height: 30px; opacity: 1; } 如果在documentation自见1.2 ngAnimate使用是不同的，你必须指定一个带有动画的类，并在你的css中输入或输入 - 离开，角度服务会为你在dom中的类添加ng-enter或ng-leave。