使用附加项目拉伸时的过渡 Flexbox

Question

我想要一个 flexbox（容器，而不是项目）动画/过渡，因为它可以拉伸和收缩以适应其中出现的不同数量的项目。有没有办法让这成为可能？我只能找到为其中的项目大小设置动画的解决方案，而不是 flexbox 本身。

请看下面场景的sn-p：

const { useState } = React

const App = () => {
  const [showSecondDiv, setShowSecondDiv] = useState(true);
  
  return (
    <div>
      <button onClick={() => setShowSecondDiv(!showSecondDiv)}>{(showSecondDiv? "Shrink" : "Expand") + " flexbox"}</button>
      <div className="flex-container">
        <div>Hello</div>
        {showSecondDiv ? <div>World</div> : null}
      </div>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))

.flex-container {
  border-style: solid;
  display: flex;
  flex-direction: column;
  transition: grow 2s;
  max-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

在您的情况下，您将无法转换您的 Flexbox

auto 值通常是一个非常复杂的情况。规范 建议不要在 auto 之间设置动画。

据我了解，这也适用于其他不固定的值。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#javascript_examples

您可以通过应用 `transition:all 2s' 看到没有过渡属性可以应用您正在寻求的行为

但是，这是我通过动画子元素的最大高度来产生我认为您想要的行为的尝试。

const { useState } = React;

const App = () => {
    const [showSecondDiv, setShowSecondDiv] = useState(true);
    const className = showSecondDiv ? 'grow' : 'shrink';
    return (
        <div>
            <button onClick={() => setShowSecondDiv(!showSecondDiv)}>
                {(showSecondDiv ? 'Shrink' : 'Expand') + ' flexbox'}
            </button>
            <div className="flex-container">
                <div>Hello</div>
                <div className={className}>World</div>
            </div>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

.flex-container {
    border-style: solid;
    display: block;
    flex-direction: column;
    max-width: 100px;
}
.grow {
    animation-name: grow;
}
.shrink {
    animation-name: shrink;
}
.flex-container > div {
    overflow: hidden;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes grow {
    from {
        max-height: 0px;
    }
    to {
        max-height: 1rem;
    }
}
@keyframes shrink {
    from {
        max-height: 1rem;
    }
    to {
        max-height: 0px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>