在React中使用样式化组件向可折叠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

如评论中所述，如果要触发动画，则需要使用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