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

Question

我有一个 Angular (1.3.14) 应用程序（如下所示），它应该在您单击 link 时为 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 时，它按预期工作。

这是fiddle：https://jsfiddle.net/0wcrcwxe/1/

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

AngularJs animation for ng-show faster when showing than hiding

javascript

transition

angularjs

ng-animate

ng-show