html - 无法显示带有过渡的文本

https://codepen.io/Sprudeldude/pen/aNKmMb

.verborgen{
    visibility: hidden;
}

.wrap
{
    color: black;
    width:200px;
    height: 20px;

    transition: height 1s, width 1s;
    -moz-transition: height 1s, width 1s; /* Firefox 4 */
    -webkit-transition: height 1s, width 1s; /* Safari and Chrome */
    -o-transition: height 1s, width 1s; /* Opera */
    -ms-transition: height 1s, width 1s; /* IE9 (maybe) */

}

.wrap:hover .verborgen
{
    visibility: visible;
    background: #999;
    height:200px;
    width: 500px;

}

<div class="wrap">
                <h2>Medewerkers</h2>
                          <div class="verborgen">
                            <div>Persoon 1</div>
                            <div>Persoon 2</div>
                            <div>Persoon 3</div>
                    </div>

当我将鼠标悬停在“ Medewerkers”上时，它在框中显示一个框：Persoon 1，Persoon 2和Persoon 3。

这部分代码有效，但是过渡和悬停效果不再起作用。

有人能帮我吗 ？

最佳答案

您有两个问题：


您无法制作动画（过渡）
visibility: hidden到visibility: visibile或从display:none到不是none的东西。
过渡元素是.verborgen，而不是.wrap，因此
应该对其进行过渡。

.verborgen{
  width: 0;
  height: 0;
  overflow: hidden;
  background: #999;
    -moz-transition: height 1s, width 1s; /* Firefox 4 */
    -webkit-transition: height 1s, width 1s; /* Safari and Chrome */
    -o-transition: height 1s, width 1s; /* Opera */
    -ms-transition: height 1s, width 1s; /* IE9 (maybe) */
    transition: height 1s, width 1s;
}

.wrap
{
    color: black;
    width:200px;
    height: 20px;

    transition: height 1s, width 1s;
}

.wrap:hover .verborgen
{
    height:200px;
    width: 500px;

}

<div class="wrap">
                <h2>Medewerkers</h2>
                          <div class="verborgen">
                            <div>Persoon 1</div>
                            <div>Persoon 2</div>
                            <div>Persoon 3</div>
                    </div>

关于html - 无法显示带有过渡的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36721895/