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

【问题标题】：Getting a smooth transition effect in CSS when toggling from a visually hidden element从视觉隐藏的元素切换时在 CSS 中获得平滑的过渡效果
【发布时间】：2016-04-02 10:44:25
【问题描述】：

我正在尝试将一个元素从视觉上隐藏并返回，但效果不太好。

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');
});

【问题讨论】：

根据 Meta 讨论重新打开 meta.stackoverflow.com/questions/313660/…
“如何从下面的代码转换，因为这是一种更加用户友好的方式来隐藏内容以实现可访问性目的。” 您是否希望内容可供访问键盘用户？或者您是否希望内容被明显隐藏，但屏幕阅读器可以检测到它？
我猜是屏幕阅读器的一部分。我实际上是从css-tricks.com/places-its-tempting-to-use-display-none-but-dont 那里得到的技术，所以我尽可能地尝试使用它。

标签： css css-transitions transition

【解决方案1】：

我不确定这是不是你要找的东西

示例：CODEPEN

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

【讨论】：