如何使用 Styled-components 在变换上添加过渡？答案

【问题标题】：How do you add a transition on transform with Styled-components?如何使用 Styled-components 在变换上添加过渡？
【发布时间】：2018-01-15 15:32:42
【问题描述】：

我尝试在transform 属性上创建一个transition。但它不会影响任何更改。

我检查了其他属性，例如：background-color、color...，它工作正常。

实时代码：https://ueeieiie.github.io/styled-transition-transform/dist/

源代码：

// 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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs transition styled-components

【解决方案1】：

显然，阻止组件具有过渡效果的原因是我在渲染生命周期内创建了样式组件。

当我把它拿出来时一切正常。

解决方案：https://github.com/ueeieiie/styled-transition-transform

【讨论】：