布局更改时的过渡

Question

布局更改过渡

我有一个父容器，里面有两个子元素：child1 和 child2。父容器的显示属性设置为“flex”，方向为“行”，但对于大于 768px 的屏幕，我希望它更改为“flex-col”方向。如何为这个布局更改添加平滑过渡，以便当屏幕尺寸从 768px 或更高增加并且弯曲方向发生变化时，它会平滑过渡而不是突然过渡？

<style>
    .parent {
        display: flex;
        transition: all 0.3s;
    }
    .child1, .child2{
        width: 100px;
        height: 100px;
    }
    .child1{
        background:red;
    }
    .child1{
        background:blue;
    }
    @media (min-width: 768px) {
        .parent {
            flex-direction: column;
        }
    }
</style>

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Answer 1

欢迎来到 Stackoverflow！

使用 CSS 无法做到这一点，因为

flex-direction

不是可动画属性。

但是，你可以用JavaScript做类似的事情，但我不知道它是否符合你的需求。

无论如何，这是代码：

window.addEventListener("resize", () => {
  if (window.innerWidth > 768) {
    document.querySelector(".child2").style.translate = "-100px 100px";
  } else {
    document.querySelector(".child2").style.translate = "0";
  }
});

.parent {
  display: flex;
}

.child1,
.child2 {
  width: 100px;
  height: 100px;
  transition: all 0.3s;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>