html - 我怎样才能使从左侧滑入的 flexbox 过渡到页面居中？

Question

我目前有一个带有 css 属性的 flexbox，看起来像这样:

#root {
    display: flex;
    width: 85%;
    border: 1px #F2F0F0 solid;
    margin: 0 -100%;
    position: relative;
    top: 15%;
    height: 600px;
    overflow: hidden;
    align-items: center;
    transition-property: margin;
    transition-duration: 1s;
}

这将我的 flexbox 完全推出屏幕，向左。我现在想把它滑到右边，但是，我读到你不能使用计算值的过渡，比如 margin: 0 auto 这是我希望我的 flexbox 过渡到的 css，在为了使我的 flexbox 响应地居中到我的屏幕中心。

我怎样才能做到这一点？我确定我错过了一些简单的东西。我目前的过渡只是一个既没有响应也没有居中的边距。

#root.slide-in {
    margin: 0 2%;
}

编辑:

我的 flexbox 在这样的容器中:

<div class="container">
    <!-- I want to center this flexbox -->
    <div id="root" class="flexbox"></div>
</div>

Answer 1

您应该使用 CSS 属性 transform 而不是为 margin 设置动画，它是为这种过渡而创建的。然后，您可以保留 CSS 布局属性(例如边距和位置)不变。与 margin 不同，改变 transform 永远不会改变周围元素的定位。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

.container {
  background: #eee;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

#root {
  align-self: center;
  width: 85%;
  height: 60px;
  background: #ccc;
  transition: 1s transform;
  padding: 10px;
}

.hidden {
  transform: translateX(-100vw);
}

<div class=container onclick="document.querySelector('#root').classList.toggle('hidden')">
  <div id=root> This is #root </div>
  <p>click to hide or show #root</p>
</div>