AngularJs animation for ng-show faster when showing than hiding
Question
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>
1 answers
solution1
1 ACCPTED 2015-03-12 04:29:13
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.