html - style - Buscando un método elegante, exclusivo de CSS para ocultar/mostrar el contenido de altura automática(con transiciones)
style display none (3)
Me gustaría un método que use solo transiciones CSS, para ocultar / mostrar de manera efectiva (y atractiva) el contenido en vuelo estacionario.
La advertencia es que deseo mantener la altura dinámica (automática).
Parece que la ruta óptima sería la transición entre una fixed height:0 , a una height:auto , pero lamentablemente esto aún no es compatible con las transiciones en los navegadores.
Una aclaración en respuesta a los comentarios :: No se trata tanto de esperar hasta que todos los navegadores actuales sean compatibles con CSS3, sino más bien de abordar un defecto percibido de CSS3 en sí mismo (por ejemplo, la falta de height:0 > height:auto )
He explorado algunas otras formas, que se pueden ver en el siguiente violín (y se detallan a continuación), pero ninguno de ellos me satisface, y me gustaría comentarios / sugerencias para otros enfoques.
http://jsfiddle.net/leifparker/PWbXp/1/
Base CSS
.content{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
overflow:hidden;
}
Variación n. ° 1: el corte de altura máxima
.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }
Contras
a. Tendrá que establecer arbitrariamente una altura máxima superior, lo que, con un amplio contenido dinámico, podría cortar la información.
segundo. Si, como medida de precaución para ( a ), recurre a establecer una altura máxima máxima muy alta, la demora en la animación se torna incómoda, ya que el navegador transiciona de forma invisible toda la distancia. También hace que la relajación sea menos efectiva visualmente.
Variación # 2 - Relleno y la ilusión de crecimiento.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }
Contras
a. Es discordante. Definitivamente es un poco mejor que simplemente sacar el contenido de la nada, y el efecto se ve más vendido por la transición de la opacidad, pero en general no es tan brillante visualmente.
Variación n. ° 3: el enfoque de ancho de falla defectuoso.content { width:0%; }
.activator:hover +.content{ width:100%; }
Contras
a. A medida que el ancho se reduce, el ajuste de línea fuerza cualquier texto adicional en las líneas subsiguientes, y terminamos con un div invisible super alto que aún exige el inmueble.
Variación # 4 - El tamaño de fuente efectivo, pero nervioso.content { font-size:0em; opacity:0; }
.activator:hover +.content{ font-size:1em; opacity:1; }
Contras
a. Si bien esto tiene un tipo de efecto agradable, de barrido, el cambio de la línea de ajuste a medida que crece la fuente provoca una trepidación poco atractiva.
segundo. Esto solo funciona para contenido que consiste en texto. Se necesitarían agregar otras transiciones para administrar la escala de entradas e imágenes, y si bien es completamente viable, esto erosionaría la simplicidad.
Variación # 5 - La Mantequilla de la Altura de la Línea.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }
Contras
a. Mi favorito estéticamente, pero al igual que con el # 4, esto funciona más simplemente con contenido de solo texto.
Variación # 6 - El Anti-Margin (ofrecido por @graphicdivine).wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }
Contras
a. Hay un retraso en el vuelo estacionario que no es óptimo. Esto es el resultado de que el .content esté .content invisible en la pantalla y se tome tiempo para animarse hacia abajo antes de aparecer.
segundo. El margin-top: -100% es relativo al ancho del elemento contenedor. Entonces, con diseños fluidos existe la posibilidad de que cuando la ventana se encoge bastante pequeña, el margin-top no sea suficiente para mantener oculto el contenido.
height:0 y la height:auto , todo esto sería discutible. Hasta entonces, ¿alguna sugerencia?
¡Gracias! Leif
Bueno ... Sé que ha pasado un tiempo, pero necesitaba usar una animación en altura, y creo que muchos otros programadores todavía necesitan y / y tendrán que hacerlo.
Entonces, me quedé aquí porque necesitaba mostrar los detalles del modo de una descripción de producto dentro de una tabla de celda cuando el usuario pasa la celda. Sin usuario suspendido, solo se muestran el máximo de 2 líneas de descripción. Una vez que el usuario lo sitúa, todas las líneas (el texto puede ser de 1 a 8 líneas, longitud dinámica e impredecible) deben mostrarse con algún tipo de animación de altura.
Llego al mismo dilema y elijo utilizar la transición de altura máxima (estableciendo una altura máxima máxima, que estaba seguro de que no cortará mi texto), porque este enfoque me parece ser la solución más limpia para animar el texto. altura.
Pero no podría estar satisfecho con la demora en la animación de "deslizar hacia arriba", al igual que usted.
Fue entonces cuando encontré un comentario sobre la curva de transición aquí: http://css3.bradshawenterprises.com/animating_height/ .
La idea de este tipo es brillante, pero esta solución sola "corta" el efecto de la animación de "deslizamiento hacia abajo". Entonces, pensando un poco, llegué a una solución final.
Así que aquí está mi solución usando la Idea de Rhys (Tipo de enlace arriba):
Slide Down Animation (Hover), con un " crecimiento suave ", y Slide Up Animation sin (virtualmente) " retraso ":
div {
background-color: #ddd;
width: 400px;
overflow: hidden;
-webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
-moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
max-height: 38px;
}
div:hover {
-webkit-transition: max-height 2s ease;
-moz-transition: max-height 2s ease;
transition: max-height 2s ease;
max-height: 400px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>
Aquí hay un JsFiddle simple
Y aquí está tu JsFiddle actualizado (parte de él, de hecho)
Esta es una solución perfecta (en mi opinión) para menú, descripciones y todo lo que no es extremadamente impredecible, pero como señaló anteriormente, existe la necesidad de configurar una altura máxima alta, y puede cortar una altura sorprendentemente alta contenido dinámico En esta situación específica, usaré jQuery / JavaScript para animar la altura en su lugar. Dado que la actualización del contenido se realizará utilizando algún tipo de JavaScript, no puedo ver ningún daño utilizando un enfoque Js para la animación.
¡Espero haber ayudado a alguien allá afuera!
Deberías usar scaleY.
HTML:
<p>Here (scaleY(1))</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
CSS:
ul {
background-color: #eee;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.26s ease;
}
p:hover ~ ul {
transform: scaleY(1);
}
He hecho una versión prefijada del proveedor del código anterior en jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/
Prueba esto, el anti-margen :
.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }