0

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

1 respuesta 1

1

Tienes que usar max-height en lugar de height y establecer un alto fijo a max-height

.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;
    margin-top: -2px;
    background: #fff;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5);
    max-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    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 {
    max-height: 500px;
}

.dropdown:hover .dropbtn {
    border-radius: 10px 10px 0px 0px;
    background: #0092ED;
    color: #fff;
}
<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>

1
  • Gracias Edwin! Probé eso antes, pero no entiendo por qué en su momento no funcionó, seguramente tendría algo por ahí suelto
    – lromeraj
    Commented el 12 may. 2017 a las 18:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.