Question

我试图通过使用简单的jQuery slideUp / slideDown来设置使用ng-show in angular（版本1.3.2）显示的Twitter引导面板主体打开/关闭动画。

（我首先尝试使用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>

我错过了什么吗？

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

  ...

ngShow上的动画第一次跳过

1 个答案: