在 React 中使用 styled-components 向可折叠 div 添加过渡答案

【问题标题】：Add transition to collapsable div using styled-components in React在 React 中使用 styled-components 向可折叠 div 添加过渡
【发布时间】：2018-03-20 16:41:30
【问题描述】：

我正在尝试在 react 中使用 styled-components 创建一个简单的可折叠 div。

我可以让 div 根据状态切换打开和关闭，但我似乎无法让转换工作。它只是跳开或关闭。

样式化组件：

const Details = styled.div`
    transition: 0.3s ease-out;

    &.open {
        height: auto;
        padding: 25px 0;
    }

    &.closed {
        height: 0;
        overflow: hidden;
    }
`;

JSX

<Details className={this.state.detailsOpen ? 'open' : 'closed'}>
    {stuff}
</Details>

【问题讨论】：

您无法将height 转换为auto（您还缺少height 在transition 规则声明中）。但是，您可以转换 max-height，这是用于此目的的常用解决方法，请参阅：stackoverflow.com/questions/3508605/…
styled-components 是否支持类似 sass 的语法 &.open { ？
感谢 Miguel，我使用该建议尝试了多种方法，但行为保持不变。是因为我有条件地更改了“open”类并将其全部从样式元素中删除吗？

标签： css reactjs styled-components

【解决方案1】：

如 cmets 中所述，如果要触发动画，则需要使用 max-height。由于您使用的是styled-components，因此最好不要依赖className，而直接将状态作为道具传递给组件：

JSX

<Details open={this.state.detailsOpen}>
    {stuff}
</Details>

样式化组件

const Details = styled.div`
    max-height: ${props => props.open ? "100%" : "0"};
    overflow: hidden;
    padding: ${props => props.open ? "25px 0" : "0"};
    transition: all 0.3s ease-out;
`;

我在代码沙箱上一起扔了一个例子：https://codesandbox.io/s/1qrw632214

【讨论】：

谢谢马特。我玩了演示，效果很好。我似乎仍然无法过渡到工作。只是跳不动，但至少我知道这是有效的，所以会追踪在其他地方阻止它的原因。
没问题，祝你好运！您可能需要检查任何直接父元素，这些元素也可能表现出任何显示/隐藏行为，其属性无法动画developer.mozilla.org/en-US/docs/Web/CSS/…。