Text nicht mit Übergang

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>

Wenn ich den Mauszeiger über "Medewerkers" zeigen kann, zeigt es eine Box mit in der Box: Persoon 1 Persoon 2 und 3 Persoon.

Dieser Teil des Codes funktioniert, aber der Übergang und Hover-Effekt funktioniert nicht mehr.

Kann mir jemand helfen?

Answer 1

Sie hatten zwei Probleme:

1. Sie nicht (Übergang) alles animieren können, die von visibility: hidden-visibility: visibile oder von display: none auf etwas, was nicht none ist verändert.
2. Das Übergangselement ist .verborgen und nicht .wrap, daher sollte der Übergang darauf angewendet werden.

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