title: How to make a CSS transform affect the flow of other elements
body: <p>I'm using CSS transitions with the <code>transform</code> property to shrinks elements when adding and removing them.</p>
  
  <p>However one problem with this is that this property doesn't affect the flow of other elements, so it appears as though the element being deleted shrinks away, and then the rest of the elements jump suddenly.</p>
  
  <p>If I were to animate the height property instead of using a transform this would be fine, however in actual usage I am using elements of variable height so I won't know what heights I can animate between.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> people have suggested animating the <code>height</code> property (which won't work as stated above), or the <code>max-height</code> property. The <code>max-height</code> property will work to some extent, however you cannot align the timings perfectly as the transition will keep adjusting the <code>max-height</code> property past the actual height of the element until the end of the transition time.</p>
  
  <p>Another problem with these approaches is that it does not use the smooth animations that you can achieve with the <code>transform</code> property. The object's transform will happen smoothly, however the movement of the following elements will stutter as the browser renders these transitions differently.</p>
  
  <hr>
  
  <p>Here's a JSFiddle with what I mean (try adding then removing elements, and see the jump when elements are removed):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;
    Add Box
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>