Dit is wat ik heb jsFiddle-link
nav.main ul ul {
position: absolute;
list-style: none;
display: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
</ul>
</nav>Antwoord 1, autoriteit 100%
Zoals u weet, kan de eigenschap displayniet worden geanimeerd, MAAR alleen door het in uw CSS te hebben overschrijft het de overgangen visibilityen opacity.
De oplossing… heeft zojuist de eigenschappen van displayverwijderd.
nav.main ul ul {
position: absolute;
list-style: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
visibility: visible;
opacity: 1;
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a>
</li>
<li><a href="">Dolor</a>
</li>
<li><a href="">Sit</a>
</li>
<li><a href="">Amet</a>
</li>
</ul>
</li>
</ul>
</nav>Antwoord 2, autoriteit 71%
Als mensen proberen display: nonete animeren, willen ze meestal:
- Vervaag inhoud, en
- Laat het item geen ruimte innemen in het document wanneer het verborgen is
De meest populaire antwoorden gebruiken visibility, waarmee alleen het eerste doel kan worden bereikt, maar gelukkig is het net zo eenvoudig om beide te bereiken door positionte gebruiken.
Aangezien position: absolutehet element verwijdert uit het typen van documentstroomafstand, kunt u schakelen tussen position: absoluteen position: static(algemeen standaard), gecombineerd met opacity. Zie het onderstaande voorbeeld.
.content-page {
position:absolute;
opacity: 0;
}
.content-page.active {
position: static;
opacity: 1;
transition: opacity 1s linear;
}Antwoord 3, autoriteit 44%
U kunt dit doen met animatie-keyframe in plaats van overgang. Wijzig uw hover-declaratie en voeg het animatiehoofdframe toe. Mogelijk moet u ook browservoorvoegsels toevoegen voor -moz- en -webkit-. Zie https://developer.mozilla.org/en/docs/Web/CSS /@keyframesvoor meer gedetailleerde informatie.
nav.main ul ul {
position: absolute;
list-style: none;
display: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
animation: fade 1s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
</ul>
</nav>