Estoy intentando añadir una transición a este dropdown:
HTML:
<div class="dropdown">
<button class="dropbtn">Select</button>
<div class="dropdown_content">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
width: 150px;
}
.dropbtn {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius: 10px;
font-size: 20px;
color: #888;
border: none;
padding: 10px 10px;
width: 100%;
}
.dropdown_content {
position: absolute;
display: block;
height: 0px;
margin-top: -2px;
background: #fff;
width: 100%;
border-radius: 0px 0px 10px 10px;
box-shadow: 0 13px 15px rgba(0,0,0,0.5);
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
transition: ease 0.5s;
}
.dropdown_content a {
display: block;
color: #555;
padding: 10px 0px;
transition: ease 0.2s;
cursor: pointer;
}
.dropdown_content a:hover {
background: #0092ED;
color: #fff;
}
.dropdown_content::-webkit-scrollbar {
display: none;
}
.dropdown:hover .dropdown_content {
height: auto;
}
.dropdown:hover .dropbtn {
border-radius: 10px 10px 0px 0px;
background: #0092ED;
color: #fff;
}
Sé que el navegador no puede calcular una transición de display: none;
a display: block;
pero en este caso estoy cambiando el alto del dropdown_content
y no entiendo por qué no está funcionando.
También os lo dejo en JS Fiddle para ahorrar el copia y pega.
Agradecería cualquier ayuda posible