runtimeZero runtimeZero - 2 months ago 7
CSS Question

animating using angular animate

I use .ng-hide to set height to 0px

.ng-hide .bar {
height: 0px;
}


and then when .ng-hide is remove the height is set to 5px;

.bar {
transition: height linear 2.5s;
border-width: 0px;
margin: 0px;
height: 5px;
}


However I don't see any transition happening.
(I expected the results to be like: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_animation_css )

Not sure what I am missing here:

Plnkr: http://plnkr.co/edit/B5LBwKSmL13BOoGuBhSx?p=preview

Answer

Looking at your plunker you are missing:

The angular-animate script

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

and the module:

var app = angular.module('plunker', ['ngAnimate']);

Comments