反应姿势-从右边进入动画，从左边退出

Question

我目前正在玩反应姿势。我想做的是把不同的盒子从右边放进动画，然后从左边退出。然而，我似乎无法让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>