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

您的代码无效的问题是因为高度动画仅适用于数字中的固定值，而不适用于auto或百分比高度。您可以使用滑动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时需要滑入其中。可以编辑代码以达到同样的效果。

CSS Animation隐藏和显示手风琴等内容

1 个答案: