Question

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

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

现在下面的代码有效，但唯一的问题是在第一页加载时我可以看到“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
    }

Answer 1

目前您正在为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加${}，我不确定这种语法。

Answer 2

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

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

2 个答案: