html 布局更改时的过渡

ghg1uchk 于 2023-10-14 发布在其他

关注(0)|答案(1)|浏览(107)

布局变更过渡

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

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

Html

来源：https://stackoverflow.com/questions/77247655/transition-on-layout-change

1条答案

按热度按时间

7gcisfzg1#

欢迎来到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>

赞(0）回复(0）举报 2023-10-14

我来回答

html 布局更改时的过渡

布局变更过渡

1条答案

相关问题

热门标签

最新问答