Isto é o que tenho [jsFiddle link][1]
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>
Porque é que não há transição? Se eu definir
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 0; /* changed this line */
}
Então a "subnav" nunca aparecerá (claro ) mas porque é que a transição sobre a opacidade não desencadeia? Como pôr a transição a funcionar?
Como sabe, a propriedade display
não pode ser animada MAS apenas por tê-la no seu CSS, ela anula as transições de visibilidade
e opacidade
.
A solução...acabou de remover as propriedades do display
.
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>
Geralmente quando as pessoas estão a tentar animar display: nenhum
o que realmente querem é:
As respostas mais populares utilizam a "visibilidade", que só pode alcançar o primeiro objectivo, mas felizmente é's igualmente fácil de alcançar ambos, utilizando a "posição".
Uma vez que "posição: absoluto" remove o elemento do espaçamento do fluxo do documento, é possível alternar entre "posição: absoluto" e "posição: estático" (padrão global), combinado com "capacidade". Ver o exemplo abaixo.
.content-page {
position:absolute;
opacity: 0;
}
.content-page.active {
position: static;
opacity: 1;
transition: opacity 1s linear;
}
Isto pode ser feito com animação-keyframe em vez de transição. Mude a sua declaração hover e adicione o quadro-chave de animação, poderá também precisar de adicionar prefixos de browser para -moz- e -webkit-. Ver https://developer.mozilla.org/en/docs/Web/CSS/@keyframes para informações mais detalhadas.
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>
Aqui está uma actualização sobre o seu violino.