transicion - ¿La transición CSS no funciona para el porcentaje de altura?
transition css3 ejemplos (8)
Tengo las siguientes definiciones de CSS:
.detailsCollapsed
{
display:none;
height:0%;
width:100%;
-webkit-transition:height 40s ease-in-out;
}
.detailsExpanded
{
display:block;
visibility:visible;
height:100%;
width:100%;
-webkit-transition:height 40s ease-in-out;
}
Estos se aplican a un div con algún contenido dentro de él.
También tengo algunos javascript que cuando se hace clic en un div, cambia el nombre de la clase en el elemento. ¿Esto funciona bien para expandir y colapsar pero no hay animación en el iPhone? (Todas las otras transiciones que probé funcionan bien con animación fluida) ¿Alguna idea?
Solución CSS sin necesidad de calcular max-height.
Aquí está mi solución si no se conoce la altura total
.container{
overflow:hidden;
max-height:20px;
transition-property: max-height;
-webkit-transition-property: max-height;
transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/
-webkit-transition-delay: 1s;
}
.container .content{
z-index:5;
background-color:LightGray;
margin-top:20px;
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transition:transform 1s;
-webkit-transition:transform 1s;
}
.container:hover{
max-height:9999px; /*apparently "none" doesnt work*/
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.container:hover .content{
transform:translateY(0);
-webkit-transform:translateY(0);
}
/*Less interesting stuff below*/
body{
background-color:navy;
}
div,label{
margin:0;
padding:0;
}
.container label{ /*Just a label to describe what you can do here*/
height:20px;
line-height:20px;
display:block;
z-index:10;
position:absolute;
background-color:maroon;
width:100%;
}
<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in tristique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo.
Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue sed dui volutpat ultrices. Pellentesque mollis scelerisque metus, vulputate viverra risus pellentesque et. Duis nisi ante, faucibus in nunc et, semper varius turpis. Vivamus pharetra volutpat convallis.
Curabitur quis urna in orci tincidunt cursus vel ac dolor. Integer turpis augue, maximus eu lectus a, euismod consequat risus. Fusce leo lacus, dignissim vel sapien at, venenatis porttitor dui. Donec in metus non ex facilisis venenatis. In ac urna non tellus lobortis fringilla. Maecenas ornare dui nisl, gravida ornare purus aliquam in. Cras nec tortor eget neque volutpat pulvinar. In vestibulum, ante ut pharetra semper, nulla libero tincidunt nunc, a convallis orci dolor vel metus. Vivamus enim est, volutpat sit amet sagittis ut, efficitur at lacus. Morbi laoreet erat sit amet finibus finibus. Nulla sodales ut est non commodo. Aliquam sed purus a magna vehicula ullamcorper et id nunc. Curabitur aliquet tempor odio, euismod tempor ante consectetur ut. Proin neque sem, imperdiet sed est quis, ultricies tincidunt sem.
Donec nec sem id eros congue convallis eu in nibh. Etiam viverra sollicitudin maximus. In hac habitasse platea dictumst. Ut quis porta turpis. Duis egestas quam diam, id bibendum dolor imperdiet quis. Praesent ac odio in neque ultrices commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.
</div>
</div>
</body>
La solución (CSS puro) hasta ahora
Si dejas height:auto; y utilice valores fijos de max-height simular una transición:
.details-expanded {
max-height: 300px; /* try to guess a max-height for your content */
}
.details-collapsed {
height: auto;
max-height: 0;
transition: max-height 500ms linear; /* pick a proportional duration */
}
Preste atención a la duración de la transición y max-height cuando el elemento se expande. Juega con los valores hasta obtener el comportamiento deseado.
De esta manera, puede obtener una transición entre dos valores definidos (en el ejemplo anterior, de 0 a 300), mientras que la propiedad de height simplemente "seguirá" la transición de max-height y aumentará hasta que obtenga el tamaño del contenido.
Población
DEMO 1 - un ejemplo de trabajo de esta solución
DEMO 2 - solo demostración de lo que está pasando en DEMO 1
Observaciones
Por ahora, las transiciones se implementan solo entre valores predefinidos y supongo que es porque el motor no puede adivinar el valor inicial o final en algunos casos. ¿Qué sucede si tiene una transición de altura cuyo valor final es del 50% pero la transición en sí afecta de alguna manera la altura del padre? Probablemente requeriría varios cálculos de reflow en cada cuadro, lo que causaría problemas de rendimiento.
Como dijo fabb , la especificación para las transiciones de CSS determina que los valores de porcentaje deberían ser compatibles, por lo que podría ser solo una cuestión de tiempo hasta que los motores decidan en qué casos van a admitir transiciones utilizando puntos valuados dinámicamente. Sin embargo, no estoy seguro de cuál podría considerarse el comportamiento correcto para los valores auto .
Aquí hay una solución para aquellos que quieren usar porcentajes.
El truco es contenerlo dentro de un div con una altura y anchura determinadas. Si estás flotando divs de contenedores, puede que esto no sea lo ideal, pero si estás posicionando contenedores de manera absoluta, esto debería funcionar bastante bien y siempre que los elementos no se superpongan entre sí.
aquí está el código
.container {
width: 500px;
height: 500px;
background: transparent;
}
.expand-content{
height: 0%;
color: #fff;
background: green;
}
.expand-content:hover {
height: 100%;
background: orange;
transition: all 2s ease;
}
.expand-content p {
font-size: 35px;
text-align: center;
}
<div class="container">
<div class="expand-content">
<p>Expanded Content</p>
</div>
</div>
en JSFiddle: http://jsfiddle.net/jtZ8j/7/
De acuerdo con la especificación W3C en las transiciones de CSS3 , tanto la longitud como el porcentaje deben permitirse para una transición en la altura de la propiedad. Así que supongo que es solo cuestión de tiempo hasta que se admita un porcentaje en los navegadores.
Es el cambio de visualización: ninguno a mostrar: bloque que detiene la transición. Intente configurar el estilo contraído para mostrar: bloque; altura: 0; desbordamiento: oculto;
Nota: una altura expandida de auto también detendrá la transición. Si no hay una altura establecida en el bloque que contiene, una altura del 100% es igual a una altura de auto.
He utilizado la siguiente solución para los elementos en los que necesito cambiar entre mostrar ninguno y bloquear, y mantener el efecto de transición:
function slidedown(element) {
...
element.style.display = "block";
var timerId = setTimeout(function(){
element.style.webkitTransitionProperty = "height";
element.style.webkitTransitionTiming = "linear";
element.style.webkitTransitionDuration = "3.5s";
element.style.height = "500px";
}, 0);
...
}
La función setTimeout forzará un breve retraso que permitirá que se produzca la transición después de cambiar la propiedad de visualización. Espero eso ayude.
Ojalá ya haya solucionado esto, pero estoy escribiendo para decir que me encontré con el mismo problema: WebKit, al menos en iOS 4.1, no animará una transición si se definió en un elemento con el estilo "pantalla: ninguna ", al igual que Nicolás mencionado anteriormente.
Si su preocupación por no representar este elemento es el rendimiento, como en mi caso, entonces propongo otra solución que establecer la altura en 0. En la devolución de llamada del evento onLoad de su cuerpo, guarde el elemento en una variable y elimínelo del DOM. Luego reinsértelo cuando llegue el momento de mostrarlo.
Tuve el mismo problema. La transición funcionó bien cuando se "colapsó", pero apareció sin transición (como estar "encendido") en "expandir", cuando "pantalla: ninguna" se configuró antes.
Accidentalmente llegué a una solución de trabajo durante la depuración: simplemente al consultar "offsetHeight" parece forzar una nueva representación interna del elemento.
algo como esto:
showElement = function(){
...
oEl.style.display = "block";
var xDump = oEl.offsetHeight;
oEl.className = "show";
}
xDump nunca se usa, pero tenerlo, hizo la diferencia.