ng-show的AngularJs动画显示比隐藏更快答案

【问题标题】：AngularJs animation for ng-show faster when showing than hidingng-show的AngularJs动画显示比隐藏更快
【发布时间】：2015-03-12 04:07:11
【问题描述】：

我有一个 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>

【问题讨论】：

也许我的问题不清楚。我希望它同时折叠和改变不透明度。

标签： javascript angularjs transition ng-animate ng-show

【解决方案1】：

因为max-height:9999px。

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

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

【讨论】：

你知道为什么 max-height 会影响这个吗？
在动画期间max-height 从0 - 9999 or 9999 - 0 in 3.35 sec 变化。在显示时，我们需要至少 150 像素的 max-height。将值从 0 更改为 150 不会花费太多时间，因此我们能够快速看到更改。虽然 hide 将值从 9999 更改为 150 将需要很长时间，因此我们能够缓慢地看到更改。
这意味着 max-height 在过渡时只比 height 稍微好一点。