javascript - 像 Accordion 一样隐藏和显示内容的 CSS 动画

Question

我正在尝试在单击链接时使视觉上隐藏的内容滑动打开。

我有一个关键帧动画，我正在使用它来尝试将高度从 0px 设置为 100%。第一次单击会删除 .sr-only 类并添加应运行关键帧动画的 .open 类。我不确定为什么关键帧动画不起作用。

到目前为止，这是我的代码的 fiddle :http://jsfiddle.net/JkaAL/

这是代码:请注意，我只是使用 -webkit- 前缀并仅在 chrome 中进行测试。

HTML:

<a href="#" class="js-link">Click Here</a>

<div class="js-content sr-only">
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
</div>

CSS:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

@-webkit-keyframes openIt {
    0% { height: 1px; }
    100% { height: 100%; }
}

.open {
    position: static;
    width: auto;
    padding: initial;
    margin: initial;
    overflow: visible;
    clip: auto;
    border: 0;
    -webkit-animation: openIt 2s linear;
}

JavaScript:

var $link = $('.js-link'),
    $content = $('.js-content');

$link.click(function(e) {
    e.preventDefault();

    if ( $content.hasClass('sr-only') ) {
        $content.removeClass('sr-only').addClass('open');
    }
    else if ( $content.hasClass('open') ) {
        $content.removeClass('open').addClass('sr-only');
    }
});

Answer 1

您的代码无法运行的问题是因为高度动画仅适用于数字中的固定值，不适用于自动或百分比高度。您可以使用围绕滑动 div 的包装器来实现此目的。我在别处回答过类似的问题。

Animating Height and Pushing Divs Below

HTML

<div class="small-12 columns  level-1">
                <div class="row category-name "><div class="small-12 columns"><span class="">Click to expand or collapse</span></div></div>

<div class="level-2 level-2-container" style="height: 60px;">
                    <div class="grow-wrapper small-12 columns">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>

CSS

.level-2-container {
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    /* outline: 1px solid red; */
    padding: 0;
    overflow:hidden;
}

JavaScript

$(document).on('click', '.level-1', function(event) {
    var $level1 = $(event.currentTarget);
    var $level2 = $level1.find('.level-2-container');
    var $growWrapper = $level1.find('.grow-wrapper');
    var heightToSet = $growWrapper.height();

    growDiv = $level2[0];
    if (growDiv.clientHeight) {
        $level2.height(growDiv.clientHeight);
        $level2.height(0);
    } else {
        growDiv.style.height = heightToSet + "px";
    }

    event.stopPropagation();
});

JS-Fiddle http://jsfiddle.net/hps8p/

如果您需要在打开一个 div 时滑入所有其他 div。可以编辑代码以实现相同的效果。