如何反向运行 react-spring 动画？答案

【问题标题】：How can I run a react-spring animation in reverse?如何反向运行 react-spring 动画？
【发布时间】：2021-09-12 06:08:00
【问题描述】：

我有一个动画，可以很好地从右侧和左侧移动项目。当点击后退按钮时，我想做相反的事情，类似于从移动应用程序的导航堆栈中弹出一个视图。我的代码在下面，单击按钮时如何使动画向后运行？我正在使用 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;

【问题讨论】：

为此类问题准备codesandbox 会很高兴。

标签： reactjs typescript react-spring

【解决方案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。

【讨论】：