Wie kann ich nur CSS verwenden, um eine Animation hinzuzufügen, um zwischen "display: none;" und "display: block;"

Question

Ich füge eine Animation hinzu, wenn sie "display: block;" :

.button:hover > .list { 
 
    display: block; 
 
} 
 

 
.list { 
 
    display: none; 
 
    animation: listshow 0.8s ease normal; 
 
} 
 

 
@keyframes listshow { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<div class="button"> 
 
    <div>Show</div> 
 
    <ul class="list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul> 
 
</div>

Aber wie ich eine Animation hinzufügen kann, wenn sie sich "display: none;" ?

Danke für Ihre Zeit.

Answer 1

eher ein keyframe als verwenden, können Sie das Element opacity:0 gesetzt und dann auf :hover gesetzt opacity:1 und dann ein transition deinen list Klasse hinzufügen (da Sie nur mit Opazität spielen werden):

.button:hover > .list { 
 
    display: block; 
 
    opacity: 1; 
 
} 
 

 
.list{ 
 
    opacity: 0; 
 
    transition: 0.8s ease-in-out; 
 
}

<div class="button"> 
 
    <div>Show</div> 
 
    <ul class="list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul> 
 
</div>