I have an Angular (1.3.14) app (shown below) which is supposed to animate the ng-show when you click the link. I expect it to expand / contract at the same speed, but I cannot get it to work correctly. I also don't know why the height change is waiting until after the element has changed opacity. I would expect them to happen at the same time. Any ideas?
Here is an example of the issue I am having: https://jsfiddle.net/0wcrcwxe/
angular.module("app", ["ngAnimate"])
.controller("WebController", ["$scope", "$q", "$timeout", function($scope, $q, $timeout) {
this.checked = true;
}]); .animate-show {
max-height:9999px !important;
opacity: 1;
overflow:hidden;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
transition:all ease 3.35s;
}
.animate-show.ng-hide {
max-height:0 !important;
opacity:0;
} <!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<title>Example</title>
</head>
<body data-ng-controller="WebController as ctrl">
<div>
<a href="#" data-ng-click="ctrl.checked = !ctrl.checked">Click to show / hide</a>
<div class="animate-show" data-ng-show="ctrl.checked">
I show up all the time<br/>
I show up all the time<br/>
I show up all the time<br/>
I show up all the time<br/>
I show up all the time<br/>
I show up all the time<br/>
I show up all the time<br/>
</div>
</div>
End
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
</body>
</html>Its because of the max-height:9999px.
When i changed the max-height:150px it worked as expected.
Here is the fiddle: https://jsfiddle.net/0wcrcwxe/1/