角度手风琴没有扩大高度

Question

我正在使用角度手风琴指令来隐藏/显示内容.

我面临的问题是内容容器的高度没有变化.

这是一个吸烟者:http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c？p =preview

如果单击"显示更多",则可以看到内容是如何隐藏的,而不是显示作业的高度更改.

JS:

app.directive('sliderContentDirective', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

app.directive('sliderToggleDirective', function($document, $timeout) {
    return {
        restrict: 'AE',
        scope: { 
            target: "@"
        },
        link: function(scope, element, attrs) {             

            var timeoutFunc = function () {
                var target = angular.element($document[0].querySelector("#" + scope.target))[0];

                attrs.expanded = false;  
                element.bind('click', function() {

                    var content = target.querySelector('.slideable_content');
                    if(!attrs.expanded) {
                        content.style.border = '1px solid rgba(0,0,0,0)';
                        var y = content.clientHeight;
                        content.style.border = 0;
                        target.style.height = y + 'px';
                    }
                    else {
                        target.style.height = '0px';
                    }

                    attrs.expanded = !attrs.expanded;
                });
            }

            $timeout(timeoutFunc, 0);
        }
    }
});

如果我检查show-jobs元素,我可以看到它的初始高度为312px.如果我删除它,然后它按预期工作.

Answer 1

如果你的意图是使slider-content-directive上下滑动,在你点击按钮时隐藏/显示内容,它似乎工作......好吗？

好的,我知道发生了什么.好吧,所以问题似乎是固定高度为300px.您可以将其覆盖为height:auto;,但这会破坏容器的滑动动画 - 因为转换需要转换开始和结束的硬值.现在,至少有两种方法可以解决这个问题:

• 您可以重新使用它以使其与max-height一起使用.请参阅使用CSS过渡动画最大高度
• 你可以把它作为容器的滑动动画,当扩展完成时,设置一个类来覆盖高度,当点击"显示我的工作>>"按钮时,它会计算容器的新高度并将其分配给容器内联.顺便说一下,这个问题有点棘手.:-)

Answer 2

正如Giliar已经说过的那样,问题是你有一个固定的高度,它不允许你的section元素自动获得它的高度以适应它的所有内容(包括新扩展的手风琴).我可以为此提出的解决方案(就我所知,这也是Bootstrap的功能)

1. 将动画section的高度设置auto为动画结束时,如果展开嵌套的div,section则会正确展开.
2. 在将高度设置为0之前,将固定高度重新设置为section用户尝试关闭它的高度,以便关闭动画正常工作.

要完成第一部分,您可以定义一个调整section高度的函数,auto并在展开动画完成后调用它.

var adjustHeightFunc = function() {
    var target = angular.element($document[0].querySelector("#" + scope.target))[0];
    if (attrs.expanded) {
        var content = target.querySelector('.slideable_content');
        target.style.height = 'auto';
    }
}

由于扩展动画需要0.7秒,你可以调用adjustHeightFunc函数,超时为0.8秒(我觉得这不是最佳选择,因为如果你改变动画的持续时间,你还需要改变这个超时,但它是到目前为止我找到的最佳解决方案,欢迎任何其他建议).因此,在onClick函数的最后,您可以:

$timeout(adjustHeightFunc, 800);

要做的第二部分是section在折叠部分时不将高度设置为0,而是始终将其设置为其内容的高度.执行此操作后,如果该部分应该折叠,则使用$ timeout调用一个单独的函数,值为0(这样它将在一个单独的摘要周期执行),它将该部分的高度设置为0,从而触发崩溃动画.你的onClick函数因此变成这样:

element.bind('click', function() {
    var content = target.querySelector('.slideable_content');
    var y = content.clientHeight;
    target.style.height = y + 'px';
    if(!attrs.expanded) {
        content.style.border = '1px solid rgba(0,0,0,0)';
        content.style.border = 0;
    }
    else {
        $timeout(closeAccordionFunc, 0);
    }

    attrs.expanded = !attrs.expanded;
    $timeout(adjustHeightFunc, 800);
});

请参阅更新的Plunker.

编辑:事实证明,从评论设置closeAccordionFunc开始执行超时0并不适用于所有浏览器.解决方法是声明一个CSS类,它将元素的高度设置为auto(!important用于覆盖元素上直接设置的高度),并使用Angular的$animate服务向元素添加/删除此类,并closeAccordionFunc在类之后执行除去.因此更新的onClick功能是:

element.bind('click', function() {
    var content = target.querySelector('.slideable_content');
    var y = content.clientHeight;
    target.style.height = y + 'px';
    if(!attrs.expanded) {
        content.style.border = '1px solid rgba(0,0,0,0)';
        content.style.border = 0;
    }
    else {
      $animate.removeClass(angular.element(target), 'auto', function(){$timeout(closeAccordionFunc);});
    }

    attrs.expanded = !attrs.expanded;
    if (attrs.expanded) {
      $timeout(adjustHeightFunc, 800);
    }
});

也可以在Plunker中看到它.