анимация стилевых компонентов вперед и назад на основе реквизита

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.

Чтобы избежать дополнительного логического флага для первого рендера, вы можете сделать state.open то, что на других языках называется Enum - держатель для любого из этих трех значений.

// 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 ${}, я не уверен в этом синтаксисе.