Transition on state change React-CodePudding

I have a state that change after a click on a button. The state change the size of a sidebar.

Here is my CSS made with styled-components and conditionnal rendering :

 const SidebarStyled = styled.div`
      width: ${this.state.sidebarOpen ? '200px' : '70px'};
      position: fixed;
      left: 0px;
      top: 0px;
      height: 100vh;
      background-color: #0c1635;
      display: flex;
      flex-direction: column;

Any idea how I can apply a transition 0.2s on the conditional rendering ?

Thank you.

[PS : I tried to add transition: all 0.2s ease-in-out;, and it didn't work]

CodePudding user response：

add a transition property like transition:all 200ms ease-in;

CodePudding user response：

As I mentioned in my comment, you need to pass in a prop and interpolate it out to change your CSS. Otherwise your component will re-render, and the CSS transition won't be applied.

const { React, ReactDOM, styled } = window;

class WontWork extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sidebarOpen: false };
    }

    render() {
        const Sidebar = styled.div`
            width: ${this.state.sidebarOpen ? "200px" : "70px"};
            height: 20px;
            background: red;
            transition: width 1s;
        `;

        return (
            <main>
                <p>This won't work:</p>
                <Sidebar />
                <button
                    onClick={() => this.setState({ sidebarOpen: !this.state.sidebarOpen })}
                >
                    Expand
                </button>
            </main>
        );
    }
}

const WorkingSidebar = styled.div`
    width: ${(props) => (props.open ? "200px" : "70px")};
    height: 20px;
    background: green;
    transition: width 1s;
`;

class WillWork extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sidebarOpen: false };
    }

    render() {
        return (
            <main>
                <p>You need to pass in a <b>prop</b> to a predefined styled-component:</p>
                <WorkingSidebar open={this.state.sidebarOpen} />
                <button
                    onClick={() => this.setState({ sidebarOpen: !this.state.sidebarOpen })}
                >
                    Expand
                </button>
            </main>
        );
    }
}

ReactDOM.render(
    <div>
        <WontWork />
        <hr />
        <WillWork />
    </div>,
    document.getElementById("app")
);

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<script crossorigin src="https://unpkg.com/[email protected]/umd/react-is.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/styled-components.min.js"></script>

<div id="app"></div>

CodePudding user response：

Try this:

You can passe sidebarOpen as props:

<SidebarStyle sidebarOpen = {this.state.sidebarOpen}>

Then:

const sidebarStyle = styled.div`
     width: ${(props) => props.sidebarOpen ? "200" : "70"};
     transition: width .2s ease-in-out;
     .
     .
     .
`

I helped from here:

See here: Adding transitions to styled components

Does it work In this case?