Question

我正在试图将一个元素从视觉上隐藏起来并将其转回，但它的效果并不好。

CodePen： http://codepen.io/gutterboy/pen/VemYrL

我正在寻找的效果类似于jQuery的slidedown效果......就像这样：http://codepen.io/gutterboy/pen/adBGar

修改：此问题不是关于如何从display: none;状态转换，而是如何从下面的代码转换，因为这是一种更加用户友好的隐藏内容的方式用于无障碍目的。

HTML：

<div class="foo visuallyhidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. An tu me de L. Dat enim intervalla et relaxat. Zenonis est, inquam, hoc Stoici. At certe gravius. Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Nulla erit controversia.</div>

<div class="button">
    <button id="show">Show Box</button>
</div>

CSS：

.foo {
    margin: 0px auto;
    margin-top: 30px;
    border: 1px solid gray;
    padding: 15px;
    max-width: 500px;
    transition: 0.3s ease-in-out;
}

.button {
    text-align: center;
}

button {
    position: absolute;
    top: 300px;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    transition: 0.3s ease-in-out;
}

JS：

$('#show').on('click', function(e) {
    $('.foo').toggleClass('visuallyhidden');
});

Answer 1

我不确定这是你在找什么

示例：CODEPEN

我添加border-box: content-box;在div上，如某些可能导致延迟，冻结等的过渡案例并添加border: 1px solid transparent;以使边框动画而不是显示/不显示

从视觉上隐藏的元素切换时，在CSS中获得平滑过渡效果

1 个答案: