如何使 CSS 变换影响其他元素的流动

Question

I'm using CSS transitions with the transform property to shrinks elements when adding and removing them.

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.

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.

---

Edit: people have suggested animating the height property (which won't work as stated above), or the max-height property. The max-height property will work to some extent, however you cannot align the timings perfectly as the transition will keep adjusting the max-height property past the actual height of the element until the end of the transition time.

Another problem with these approaches is that it does not use the smooth animations that you can achieve with the transform property. The object's transform will happen smoothly, however the movement of the following elements will stutter as the browser renders these transitions differently.

---

Here's a JSFiddle with what I mean (try adding then removing elements, and see the jump when elements are removed):

 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>

Answer 1

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element.

REF: Transform Rendering

You will have to use the max-height property ( check this answer ) to get the desired effect.

 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>

Answer 2

There's no way to do it right (with css alone) ¬¬

The way I did it was partially using JS (or C#/Blazor in my case)

I used the max-height but I set it with a var() , and the value itself I'm calculating based on the content that I have (I'm using JS/c# for that), then use that value to set an inline style withe the css variable:

<ul 
    class="submenu @SubMenuActiveClass" 
    style="--max-height:@((int)(40.3f * Model.Children.Count))px">

    <!--... childrens with 40.3px height each -->

</ul>

.submenu {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;

    &.active {
        max-height: var(--max-height);
    }
}

The example is in Blazor and SCSS but it's quite easy to understand

Answer 3

You could create a wrapper around the shrinking boxes. Now you're just scaling the red boxes, that means it still uses the same space, but it's rendered in a scaled way. When you finally delete it, it doesn't use that space anymore, the elements under it will jump upwards.

If you create a wrapper around each red box, you can control the space it takes. Just change the height of that wrapper, with a transition too.

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

So, don't only scale the red boxes with a transition, but also put them in a wrapping element, and change that element's height.

Answer 4

For the best affect, you will need to modify the boxing properties which affect its surroundings. This includes the width/height, padding, margins, and border width. In the below example, I set the relevant properties to 0 for your desired effect. This includes all properties which affect the vertical spacing of the element: height , padding-[top/bottom] , margin-[top/bottom] , and border-[top/bottom]-width are all transitioned to 0.

I also added box-sizing: border-box; and overflow: hidden; to the box - you should see what happens when those are not set. I'll let you learn about those on your own.

 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 red; 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>