Поза React - анимация справа, выход слева

Question

Сейчас я играю с позой React. Что я пытаюсь сделать, так это анимировать разные блоки справа и выйти из них слева. Однако я не могу понятьpreEnterPoseработать так, как я хочу. Кажется, что по умолчанию всегда используется поза выхода.

Как я могу заставить окна анимироваться справа, а выходить слева? Вот с чем я работаю https://codesandbox.io/s/react-pose-enterexit-o2qqi?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import posed, { PoseGroup } from "react-pose";
import "./styles.css";

const Card = posed.div({
  enter: {
    x: 0,
    opacity: 1,
    preEnterPose: {
      x: 50
    },
    delay: 300,
    transition: {
      x: { type: "spring", stiffness: 1000, damping: 15 },
      default: { duration: 300 }
    }
  },
  exit: {
    x: -50,
    opacity: 0,
    transition: { duration: 150 }
  }
});

class Example extends React.Component {
  state = { isVisible: false, index: 0, items: ["1", "2", "3", "4", "5"] };

  componentDidMount() {}

  next = () => {
    if (this.state.index === this.state.items.length - 1) {
      this.setState({
        index: 0
      });
    } else {
      this.setState({
        index: this.state.index + 1
      });
    }
  };

  render() {
    const { index, items } = this.state;

    return (
      <div>
        <PoseGroup>
          {items.map((id, idx) => {
            if (idx === index) {
              return (
                <Card className="card" key={idx}>
                  {id}
                </Card>
              );
            }
            return null;
          })}
        </PoseGroup>
        <button onClick={this.next}>next</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

Answer 1

Сначала вы обновите свой posed.div в дальнейшем.

const Card = posed.div({
  preEnterPose: {
    x: 50,
    opacity: 0,
    transition: { duration: 150 }
  },
  enter: {
    x: 0,
    opacity: 1,
    delay: 300,
    transition: {
      x: { type: "spring", stiffness: 1000, damping: 15 },
      default: { duration: 300 }
    }
  },
  exit: {
    x: -50,
    opacity: 0,
    transition: { duration: 150 }
  }
});

Затем вы устанавливаете <PoseGroup>с preEnterPose подпорки к твоей позе preEnterPose. И это должно работать.preEnterPoseреквизит по умолчанию установлен на exit. Прочтите здесь

<PoseGroup preEnterPose="preEnterPose">
  {items.map((id, idx) => {
    if (idx === index) {
      return (
        <Card className="card" key={idx}>
          {id}
        </Card>
      );
    }
    return null;
  })}
</PoseGroup>