显示时ng-show的AngularJs动画比隐藏更快速

Question

我有一个Angular（1.3.14）应用程序（如下所示），当您单击链接时，该应用程序应该为ng-show动画。 我希望它以相同的速度扩展/收缩，但是我无法使其正常工作。 我也不知道为什么高度更改要等到元素更改不透明度之后才开始。 我希望它们同时发生。 有任何想法吗？

这是我遇到的问题的一个示例： 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>

Answer 1

这是因为max-height:9999px 。

当我更改max-height:150px它按预期工作。

这是小提琴： https : //jsfiddle.net/0wcrcwxe/1/

显示时ng-show的AngularJs动画比隐藏更快速

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-12 04:29:13

显示时ng-show的AngularJs动画比隐藏更快速

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-12 04:29:13

解决方案1
1 已采纳 2015-03-12 04:29:13