CODEWITHSUNDEEP
javascriptreactjstransitionstyled-components
ueeieiie
ueeieiie

Reputation: 1562

How do you add a transition on transform with Styled-components?

I try to create a transition on the transform property. but it doesn't effect any changes.

I checked other properties like: background-color, color... and it works fine.

live code: https://ueeieiie.github.io/styled-transition-transform/dist/

source code: 

// styled-component wrapper
const Red = styled.div`
    width: 100%;
    height: 100%;
    background-color: red;
    flex: 0 0 100%; 
    transition: transform 500ms ease;
    transform: translate(${
        props => props.onStart ? '0' : '100px'
    });
`;

// the button that changes the state and makes the effect
const Changer = (props) => {
    const Button = styled.div`
        position:absolute;
        background: black;
        width: 100px;
        height: 60px;
        cursor: pointer;
    `;

    const onClickHandler = () => { props.toggleOnStart() }

    return <Button onClick={onClickHandler}>Change!</Button>
}

// App wrapper component
class App extends React.Component {
    state = { onStart: true };

    toggleOnStart = () => { this.setState({onStart: !this.state.onStart}) }

    render(){
        const Wrapper = styled.div`
            width: 100%;
            height: 100%;
            background: gray;
            display: flex;
            overflow:hidden;
            position: relative;
        `;

        return (
            <Wrapper>
                <Changer toggleOnStart={this.toggleOnStart} />
                <Red onStart={this.state.onStart} />
            </Wrapper>
        );
    }
}

Upvotes: 0

Views: 7498

Answers (1)

ueeieiie
ueeieiie

Reputation: 1562

Apperently, what prevents the component to have the transition effect is because I created the styled-component inside the render life cycle.

When I took it out everything worked fine.

Solution: https://github.com/ueeieiie/styled-transition-transform

Upvotes: 3

Related Questions