Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the animation wasn't working as expected. This occurred while utilizing ngAnimate alongside AngularJS version 1.2.4.
Below is a snippet of the code I implemented:
<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;
}