css - 在 React 中使用 styled-components 添加到可折叠 div 的过渡

Question

我正在尝试在 React 中使用样式化组件创建一个简单的可折叠 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>                

Answer 1

如评论中所述，如果要触发动画，则需要使用最大高度。由于您使用的是 styled-components，因此最好不要依赖 className 并直接将状态作为 prop 传递给组件:

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