ngShow 上的动画第一次跳过

Question

我正在尝试使用简单的jQuery slideUp/slideDown来制作一个以ng-show显示的twitter引导面板主体打开/关闭的动画（版本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();
            }
        }
    }
}
});

网页部分：

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