0

我目前正在玩 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);
4

1 回答 1

0

首先，您将您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>
于 2019-11-26T06:05:43.670 回答