ngShow 上的动画第一次跳过答案

【问题标题】：Animation on ngShow skips first timengShow 上的动画第一次跳过
【发布时间】：2014-11-24 05:59:41
【问题描述】：

我正在尝试使用简单的 jQuery slideUp/slideDown 为 twitter 引导面板主体打开/关闭设置动画，该面板主体以 ng-show 的角度（版本 1.3.2）显示。

（我一开始尝试使用css过渡，但由于未知身高而无法做到，并且max-height动画在关闭时给我带来了问题，所以我决定使用JS）

我已经成功制作了动画，但是第一次就不行了动画被切换。所以第一次显示的身体不是动画的，然后是隐藏的动画，然后一切都很好（显示和隐藏动画）。

Javascript 部分：

app.animation('.animate-panel-body-slide', function(){
return {
    addClass : function(element, className, done) {
        $(element).slideUp(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    },
    removeClass : function(element, className, done) {
        $(element).slideDown(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    }
}
});

HTML 部分：

<div class="panel panel-default">
    <div class="panel-heading">
        HEADING
    </div>
    <div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen">
        SOME HTML IN BODY...
    </div>
</div>

我错过了什么吗？

【问题讨论】：

Angular 版本 1.3.2。我已经编辑了这个问题以供参考，并且已经接受了你的回答。谢谢。

标签： angularjs twitter-bootstrap ng-animate angularjs-ng-show

【解决方案1】：

当removeClass 被执行时，这是因为ng-hide（设置display: none）已从元素中删除。

第一次发生这种情况时，元素将具有display: block，这意味着该元素将立即出现，slideDown 动画将不明显。

当面板关闭时，slideUp 动画会将style="display: none;" 添加到元素中，这意味着下次打开它时它将按预期工作。

如果你像这样手动添加它：

<div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen" style="display: none">

只要面板始终以关闭状态开始，它就可以工作。

如果您希望它适用于这两种情况，您可以添加：

removeClass: function(element, className, done) {

  element.css('display', 'none');
  element.slideDown(400, done);

  ...

【讨论】：

感谢 tasseKATT 向我解释。两种解决方案都有效，我决定实施 JS 解决方案。