在 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，而是直接将状态作为 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

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

Add transition to collapsable div using styled-components in React

css

reactjs

styled-components