Bom dia pessoal, estou desenvolvendo um projeto e nele tem um cabeçalho que desenvolvi mostrando as categorias disponiveis dele. Layout do site com o Bootstrap 3.3, já por questões de apresentação decidi fazer uma animação no CSS do dropdown surgindo e se expandindo, ao dar o clique funcionou perfeitamente, porém ao desfocar dando um clique em outra coisa ele simplesmente desaparece, gostaria de fazer o reverso para esse dropdown desaparecer, consultei o W3 Schools mas não obtive uma solução para este problema.
Eis o código abaixo.
HTML:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li <?=$page=='index.php' ? 'class="active"' : '';?>>
<a href="index.php">HOME</a>
</li>
<li <?=$page=='empresa.php' ? 'class="active"' : '';?>>
<a href="empresa.php">EMPRESA</a>
</li>
<li class="dropdown <?=$page=='areas.php' ? 'active' : '';?>">
<a class="dropdown-toggle" href="Javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ÁREAS DE ATUAÇÃO</a>
<ul class="dropdown-menu">
<? while($row_rsArea = mysql_fetch_assoc($rsArea)) { ?>
<li>
<a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase"><?=$row_rsArea['area_titulo'];?></a>
</li>
<? } ?>
</ul>
</li>
<li <?=$page=='equipamentos.php' ? 'class="active"' : '';?>>
<a href="equipamentos.php">EQUIPAMENTOS</a>
</li>
<li <?=$page=='clientes.php' ? 'class="active"' : '';?>>
<a href="clientes.php">CLIENTES</a>
</li>
<li <?=$page=='contato.php' ? 'class="active"' : '';?>>
<a href="contato.php">CONTATO</a>
</li>
</ul>
</div>
CSS:
.dropdown-menu {
text-align: center;
max-height: 0px;
transition: all 2s ease;
overflow: hidden;
}
.open>.dropdown-menu {
-webkit-animation-name: dropdown; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-name: dropdown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
/* Standard syntax */
@keyframes dropdown {
0% {display: none;}
25% {display: block;}
50% {max-height: 250px;}
100% {max-height: 500px;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes dropdown {
0% {display: none;}
25% {display: block;}
50% {max-height: 250px;}
100% {max-height: 500px;}
}