像手风琴一样隐藏和显示内容的 CSS 动画

Question

我正在尝试在单击链接时打开隐藏在幻灯片中的内容。

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

到目前为止，这是我的代码的一个小提琴：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-小提琴http://jsfiddle.net/hps8p/

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