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

Question

我试图很好地将一个元素从视觉上隐藏起来转换回来，但效果不太好。

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

我正在寻找的效果类似于jQuery的向下滑动效果。。。像这样：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上，因为在一些可能导致延迟、frozents等的转换情况下并且还添加了border: 1px solid transparent;，以便边框动画化，而不是显示/notshow