Cómo hacer que una transformación CSS afecte el flujo de otros elementos

Estoy usando transiciones de CSS con la propiedad de transform para networkingucir los elementos al agregarlos y eliminarlos.

Sin embargo, un problema con esto es que esta propiedad no afecta el flujo de otros elementos, por lo que parece que el elemento que se elimina se networkinguce, y el rest de los elementos se activan de repente.

Si tuviera que animar la propiedad de altura en lugar de usar una transformación, estaría bien, sin embargo, en el uso real estoy usando elementos de altura variable, así que no sabré en qué altura puedo animar.


Editar: las personas han sugerido animar la propiedad de height (que no funcionará como se indicó anteriormente) o la propiedad de max-height . La propiedad de max-height funcionará hasta cierto punto, sin embargo, no puede alinear los times perfectamente ya que la transición seguirá ajustando la propiedad de max-height allá de la altura real del elemento hasta el final del time de transición.

Otro problema con estos enfoques es que no utiliza las animaciones suaves que puede lograr con la propiedad de transform . La transformación del object se realizará sin problemas, sin embargo, el movimiento de los siguientes elementos va a tartamudear a medida que el browser representa estas transiciones de manera diferente.


Aquí hay un JSFiddle con lo que quiero decir (intente agregar y luego eliminar elementos, y vea el salto cuando los elementos se eliminan):

 var button = document.querySelector("button"); var box = document.createElement("div"); box.className = "box"; box.appendChild(document.createTextNode("Click to delete")); button.addEventListener("click", function(e) { var new_box = box.cloneNode(true); new_box.addEventListener("click", function(e) { this.className = "box deleting"; window.setTimeout(function(e) { new_box.remove(); }, 1000); }); this.parentNode.appendChild(new_box); }); 
 button { font-size: 20pt; } .box { font-size: 20pt; margin: 10px; width: 200px; padding: 10px; background: pink; transform: scale(1, 1); transform-origin: top left; } .deleting { transform: scale(1, 0); transition: all 1000ms ease; } 
 <button> Add Box </button> 

Para los elementos cuyo layout se rige por el model de caja de CSS, la propiedad de transformación no afecta el flujo del contenido que rodea el elemento transformado.

REF: Representación de transformación

Deberá usar la propiedad de max-height ( marque esta respuesta ) para get el efecto deseado.

 var button = document.querySelector("button"); var box = document.createElement("div"); box.className = "box"; box.appendChild(document.createTextNode("Click to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to delete")); button.addEventListener("click", function(e) { var new_box = box.cloneNode(true); new_box.style.height = ( Math.random() * (200 - 30) + 30 ) + 'px'; new_box.addEventListener("click", function(e) { this.className = "box deleting"; window.setTimeout(function(e) { new_box.remove(); }, 1000); }); this.parentNode.appendChild(new_box); }); 
 button { font-size: 20pt; } .box { overflow:hidden; font-size: 12pt; margin-bottom: 10px; width: 600px; max-height:1000px; padding: 10px; background: pink; transform: scaleY(1); transform-origin: top left; } .deleting { transform: scaleY(0); max-height:0; padding:0 10px; margin-bottom:0; transition: padding 1000ms ease,max-height 1000ms ease, transform 500ms ease 500ms, margin-bottom 1000ms ease; } 
 <button> Add Box </button> 

Puede crear un contenedor alnetworkingedor de los cuadros de contracción. Ahora solo está escalando las casillas rojas, eso significa que todavía usa el mismo espacio, pero se procesa en una escala. Cuando finalmente lo elimines, ya no usa ese espacio, los elementos debajo saltarán hacia arriba.

Si crea un contenedor alnetworkingedor de cada cuadro rojo, puede controlar el espacio que ocupa. Simplemente cambie la altura de esa envoltura, con una transición también.

 /* css for a wrapper */ overflow: hidden; transition: height .2s; /* your time */ 

Por lo tanto, no solo escale los cuadros rojos con una transición, sino también colóquelos en un elemento de ajuste y cambie la altura de ese elemento.

Para get el mejor efecto, deberá modificar las properties del boxeo que afectan a su entorno. Esto incluye el ancho / alto, el relleno, los márgenes y el ancho del borde. En el siguiente ejemplo, configuré las properties relevantes en 0 para el efecto deseado. Esto incluye todas las properties que afectan el espaciado vertical del elemento: height , padding-[top/bottom] , margin-[top/bottom] , y border-[top/bottom]-width son todos transición a 0.

También agregué box-sizing: border-box; y overflow: hidden; a la caja: debería ver qué pasa cuando no están configurados. Te dejaré aprender sobre esos por tu count.

 var button = document.querySelector("button"); var box = document.createElement("div"); box.className = "box"; box.appendChild(document.createTextNode("Click to delete")); button.addEventListener("click", function(e) { var new_box = box.cloneNode(true); new_box.addEventListener("click", function(e) { new_box.style.height = this.offsetHeight + 'px'; window.requestAnimationFrame(function () { new_box.style.height = 0; new_box.className = "box deleting"; window.setTimeout(function(e) { new_box.remove(); }, 1000); }); }); this.parentNode.appendChild(new_box); }); 
 button { font-size: 20pt; } .box { box-sizing: border-box; overflow: hidden; font-size: 20pt; margin: 10px; width: 200px; padding: 10px; border: 5px solid networking; background: pink; transform: scale(1, 1); transform-origin: top left; } .deleting { height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; transform: scale(1, 0); transition: all 1000ms ease; } 
 <button> Add Box </button>