基于道具来回设计样式组件动画

时间:2018-05-19 09:59:19

标签: javascript reactjs css-animations styled-components

我想让我的主要内容滑入并回到特定的道具上

所以我创建了动画,我想我会在道具改变的情况下添加反向。

现在下面的代码有效,但唯一的问题是在第一页加载时我可以看到“slideOutContent”动画

我不希望它发生,这些幻灯片只在侧边栏打开然后滑动内容时才会发生。

const slideInContent = keyframes`
  from {
    margin-left: 0;
  }
  to {
    margin-left: 256px;
  }
`;
const slideOutContent = keyframes`
  from {
    margin-left: 256px;
  }
  to {
    margin-left: 0;
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const MainContentBox = styled.div`
  animation: ${props => props.slide ? `${slideInContent} forwards` : `${slideOutContent}`};
  animation-duration: 0.5s;
  animation-timing-function: linear;
`;

这就是我使用这个组件的方式:

class PageWithDrawer ... {

    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }

    toggleMenu() {
        this.setState(state => {
            return { open: !state.open };
        });
    }

    render() {
        ....other stuff

        <MainContentBox slide={this.state.open}>
              {this.props.children}
        </MainContentBox>

        ....other stuff
    }

2 个答案:

答案 0 :(得分:0)

目前您正在为MainContentBox提供布尔值,但您有三个条件:SLIDE_IN,SLIDE_OUT和NO_SLIDE条件。

为了避免第一次渲染的额外布尔标记,您可以在其他语言中创建所谓的Enum state.open - 这三个值中任何一个的持有者。

// You can put these in a named {} for encapsulation
const NO_SLIDE = 0, SLIDE_OUT = 1, SLIDE_IN = 2;

class PageWithDrawer ... {
    constructor(props) {
        super(props);
        this.state = {
            open: NO_SLIDE, // Initial state
        };
    }

    toggleMenu() {
        this.setState(state => ({ open: state.open % 2 + 1 }));
    }

state % 2 + 1是转换0→1,1→2和2→1的公式。

现在让我们将状态变量映射到动画属性字符串:

const stateToAnimation = {
    NO_SLIDE: 'none',
    SLIDE_OUT: slideInContent + ' forwards',
    SLIDE_IN: slideOutContent,
}

const MainContentBox = styled.div`
  animation: ${props => ${stateToAnimation[props.slide]}};
`; // other props...

您可能还需要props.slide${},我不确定这种语法。

答案 1 :(得分:0)

也许只用 transition 代替 animation。在这个特定的例子中,它应该可以完成这项工作,但我不确定它是否总是可能的。