使用React中的样式化组件向可折叠div添加过渡

Question

我正在尝试使用样式组件创建一个简单的可折叠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并直接将状态作为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