attribute - title html css

La transición CSS3 no funciona con la propiedad de visualización

Question

Esta pregunta ya tiene una respuesta aquí:

• Transiciones en la pantalla: propiedad 29 respuestas

He intentado usar css para mostrar un fundido Div oculto cada vez que desplazo el elemento primario.

Hasta ahora, todo lo que he logrado hacer es mostrar el div oculto, pero no hay transición de relajación.

Aquí está mi Código en JSfiddle http://jsfiddle.net/9dsGP/

Aquí está mi Código:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

¿Alguna pista sobre lo que estoy haciendo mal? Solo trato de obtener un efecto suave para el contenido oculto cuando coloco el cursor sobre el botón. ¡Gracias por adelantado!

Answer 1

display:none; elimina un bloque de la página como si nunca hubiera estado allí. Un bloque no se puede mostrar parcialmente; está allí o no lo está. Lo mismo es cierto para la visibility ; ¡no puedes esperar que un bloque esté medio hidden , lo cual, por definición, sería visible ! Afortunadamente, puedes usar opacity para efectos de desvanecimiento.
- reference

Como solución alternativa de CSS, puede jugar con las propiedades de opacity , height y padding para lograr el efecto deseado:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Los prefijos del proveedor se han omitido debido a la brevedad).

Aquí hay una demostración funcional . También aquí hay un tema similar en SO.

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}

#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;    
}

#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}

#button > span { display: inline-block; padding: .5em 1em }

<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>

Answer 2

Altura máxima

.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}

.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}

https://www.codehive.io/boards/bUoLvRg

Answer 3

Cuando necesite alternar un elemento, y no necesita animar la propiedad de margen. Podrías probar margin-top: -999999em . Simplemente no transiciones todo.

Answer 4

Enfrenté el problema con la display:none

Tengo varias barras horizontales con efectos de transición, pero quería mostrar solo parte de ese contenedor y doblar el resto mientras mantengo los efectos. Reproduje una pequeña demostración here

Lo obvio era envolver esas barras animadas ocultas en un div y luego alternar la altura y opacidad de ese elemento

.hide{
  opacity: 0;
  height: 0;
}
.bars-wrapper.expanded > .hide{
 opacity: 1;
 height: auto;
}

La animación funciona bien, pero el problema era que estas barras ocultas aún consumían espacio en mi página y se superponían con otros elementos.

entonces agregando display:none al wrapper oculto .hide resuelve el problema del margen pero no la transición, ni aplicando display:none o height:0;opacity:0 funciona en los elementos hijos.

Así que mi solución final fue dar a esas barras ocultas una posición negativa y absoluta y funcionó bien con las transiciones de CSS.

here

Answer 5

Hice algunos cambios, pero creo que obtuve el efecto que desea con visibility . http://jsfiddle.net/9dsGP/49/

También hice estos cambios:

position: absolute; /* so it doesn''t expand the button background */
top: calc(1em + 8px); /* so it''s under the "button" */
left:8px; /* so it''s shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */

Alternativamente, podría poner .content como un hermano de .button, pero no hice un ejemplo para esto.

Answer 6

No puede usar height: 0 y height: auto para cambiar la altura. auto siempre es relativo y no se puede hacer la transición hacia. Sin embargo, podría usar max-height: 0 y la transición a max-height: 9999px por ejemplo.

Lo siento, no pude comentar, mi representante no es lo suficientemente alto ...

Answer 7

Recientemente encontré una solución mientras jugueteaba con eso, y me dio ganas de compartir.

Personas que directamente quieren ver el resultado:

Con un clic: https://jsfiddle.net/dt52jazg/

Con el control deslizante: https://jsfiddle.net/7gkufLsh/1/

A continuación está el código:

HTML

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

JS

(function() {
  $(''.click-me'').on(''click'', function() {
    $(''.list'').toggleClass(''active'');
  });
})();

Por favor, avíseme si hay algún problema con esta solución porque creo que no hay restricción de la altura máxima con esta solución.