が移行

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>

でテキストを表示することはできません、それはボックス内でボックスを示しています。

コードのこの部分は機能しますが、移行とホバー効果はもう機能しません。

誰かが私を助けることができますか？

Answer 1

次の2つの問題がありました。あなたは visibility: hiddenからvisibility: visibileまたはdisplay: noneからnoneないものに変更（移行）何かをアニメーション化することはできません

1. を。
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>