2

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

（我一开始尝试使用 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>

我错过了什么吗？

4

1 回答 1

3

何时removeClass执行是因为ng-hide(which sets 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);

  ...
于 2014-11-23T16:23:07.757 回答