如何进行CSS转换会影响其他元素的流程 [英] How to make a CSS transform affect the flow of other elements

问题描述

我正在将CSS过渡与 transform 属性一起使用，以在添加和删除元素时缩小元素.

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.

如果我要对height属性进行动画处理，而不是使用变换，那会很好，但是在实际使用中，我使用的是可变高度的元素，所以我不知道可以在哪些高度之间进行动画处理.

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.

编辑:人们建议对 height 属性(如上所述无效)或 max-height 属性进行动画处理. max-height 属性会在某种程度上起作用，但是您不能完美地调整时间，因为过渡会不断调整 max-height 属性，使其超出元素的实际高度直到过渡时间结束.

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.

这些方法的另一个问题是，它没有使用通过 transform 属性可以实现的平滑动画.对象的转换将顺利进行，但是随着浏览器以不同的方式呈现这些转换，以下元素的移动将变得困难.

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.

这是我的意思的JSFiddle(尝试添加然后删除元素，并在删除元素时查看跳转):

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>

推荐答案

对于布局由CSS框模型控制的元素，转换属性不会影响周围内容的流动转换后的元素.

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:转换渲染

您将必须使用 max-height 属性(

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>

这篇关于如何进行CSS转换会影响其他元素的流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！