angularjs - ngShow 上的动画第一次跳过

Question

我正在尝试使用简单的 jQuery SlideUp/slideDown 为 twitter bootstrap 面板主体打开/关闭设置动画，该面板以 ng-show 以 Angular (版本 1.3.2)显示。

(我一开始尝试使用CSS过渡，但由于未知的车高度度而无法做到这一点，并且最大高度动画给我关闭带来了问题，所以我决定使用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>

我错过了什么吗？

Answer 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);

  ...