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

Question

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。

这部分代码可以工作，但是过渡和悬停效果不再工作了。

有人可以帮助我吗？

Answer 1

你有两个问题:

1. 你不能动画(过渡)任何从visibility: hidden 到 visibility: visibile 或从 display:
none 到不是none 的东西。
2. 过渡元素是.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>