Question

我尝试在transition属性上创建transform。但它不会影响任何变化。

我检查了其他属性，例如：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>
        );
    }
}

Answer 1

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

当我拿出来时一切正常。

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

如何使用Styled-components添加转换转换？

1 个答案: