如何反转运行react-spring动画？

Question

我有一个动画，可以很好地将物品从右边移到左边。当单击back按钮时，我想做相反的事情，类似于在移动应用程序中从导航堆栈中弹出一个View。我的代码如下，当按钮被点击时，我如何让动画向后运行？我使用的是React 17.0.2和react-spring 9.2.3。

import React, { useState, useCallback, CSSProperties, useEffect } from "react";
import {
  useTransition,
  animated,
  AnimatedProps,
  useSpringRef,
} from "react-spring";

import styles from "../styles/components/carousel.module.css";

const Carousel: React.FC = () => {
  const [index, set] = useState(0);
  const onClick = useCallback(() => set((state) => (state + 1) % 6), []);
  const transRef = useSpringRef();
  const transitions = useTransition(index, {
    ref: transRef,
    keys: null,
    from: { opacity: 0, transform: "translate3d(100%,0,0)" },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: { opacity: 0, transform: "translate3d(-50%,0,0)" },
  });

  useEffect(() => {
    transRef.start();
  }, [index, transRef]);

  const pageContent: { text: string; color: string }[] = [
    { text: "one", color: "lightpink" },
    { text: "two", color: "lightblue" },
    { text: "three", color: "lightgreen" },
  ];

  const pages: ((
    props: AnimatedProps<{ style: CSSProperties }>
  ) => React.ReactElement)[] = pageContent.map((obj) => {
    return function createAnimatedDiv({ style }) {
      return (
        <animated.div style={{ ...style, background: obj.color }}>
          {obj.text}
        </animated.div>
      );
    };
  });

  const onBackClicked = useCallback(() => set((state) => (state - 1) % 6), []);

  return (
    <>
      <button onClick={onBackClicked}>Back</button>
      <div className={`flex fill ${styles.container}`} onClick={onClick}>
        {transitions((style, i) => {
          const Page = pages[i];
          return <Page style={style} />;
        })}
      </div>
    </>
  );
};

export default Carousel;

Answer 1

首先，你需要知道动画的方向。为此，您可以使用usePrevious挂钩和当前索引与前一个索引的比较。然后，基于方向，您可以返回不同的转换配置。

type Direction = 'left' | 'right' | null;

// helpers

const getDirection = (index: number, previousIndex: number): Direction => {
  if (index === number) {
    return null;
  }

  return index > previousIndex ? 'right' : 'left';
};

const getTransitionConfig = (direction: Direction): Parameters<typeof useTransition>[1] => {
  if (direction === 'right') {
    return {
      from: { opacity: 0, left: -300 },
      enter: { opacity: 1, left: 0 },
      leave: { opacity: 0, left: 300 },
    };
  }

  if (direction === 'left') {
    return {
      from: { opacity: 0, left: 300 },
      enter: { opacity: 1, left: 0 },
      leave: { opacity: 0, left: -300 },
    };
  }

  return {};
};

// component

const [index, set] = useState(0);
const previousIndex = usePrevious(index);
const animationDirection = getDirection(index, previousIndex);

const transitionConfig = useMemo(() => ({
  ref: transRef,
  keys: null,
  ...getTransitionConfig(animationDirection)
}), [animationDirection, getTransitionConfig]);

const transitions = useTransition(index, transitionConfig);
// ...

为了简单起见，我使用了left属性。当然，您可以使用transform。