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

我试图很好地将一个元素从可视的隐藏状态转换为隐藏状态，但效果不太好

CodePen:

我正在寻找的效果与jQuery的效果类似。。。像这样：

编辑：这个问题不是关于如何从

显示转换：无状态，但如何从下面的代码转换，因为这是一种更为用户友好的隐藏内容的方法，以便于访问

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>

.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;
}

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

JS:

<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>

.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;
}

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

我不确定这就是你要找的

例如：

我添加了
边框框：内容框
；在div上，例如在一些可能导致延迟、冻结等的过渡情况下
并添加
边框：1px实心透明
因此边框动画而不是show/notshow
根据元讨论重新打开“如何从下面的代码转换，特别是因为这是一种更方便用户的隐藏内容的方法，以便于访问。”是否希望键盘用户访问内容？或者你想让内容隐藏在可见的地方，但屏幕阅读器可以检测到吗？我想是屏幕阅读器的一部分。事实上，我是从中获得这项技术的，所以我尽可能地利用它。