如何在 react-spring 使用转换中反转动画顺序答案

【问题标题】：How to invert animation order in react-spring's useTransitions如何在 react-spring 使用转换中反转动画顺序
【发布时间】：2021-07-01 12:42:42
【问题描述】：

我想为从 1 到 4 的项目的不透明度设置动画，但如果项目被删除，我想倒转运行它（从 4 到 1）。我认为reverse 标志可能会有所帮助，但它没有做任何事情：

import React, { useState } from "react";
import { animated, config, useTransition } from "react-spring";

export default function App() {
  const items = [1, 2, 3, 4];
  const [isToggled, setToggled] = useState(false);

  const transitions = useTransition(isToggled ? items : [], item => item, {
    config: config.gentle,
    unique: true,
    trail: 250,
    reverse: isToggled ? false : true,
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div className="App">
      <button onClick={() => setToggled(!isToggled)}>Toggle</button>

      {transitions.map(({ item, key, props }) => (
        <animated.div key={key} style={props}>
          Issue #{item}
        </animated.div>
      ))}
    </div>
  );
}

CodeSandbox

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

reverse 方法的问题在于它反转了数组中的所有内容。你只需要reverse props 在你的useTransition 的结果中的属性。

通过像这样的简单数组修改（在打字稿中）：

// utils/animation.ts
// or js just modify the type

import { UseTransitionResult } from 'react-spring';

export function reverseTransition<T, Result extends UseTransitionResult<T, object>>(
  arr: Result[],
): Result[] {
  const result: Result[] = [];
  for (let idx = 0; idx < arr.length; idx++) {
    result.push({
      ...arr[idx],
      props: arr[arr.length - 1 - idx].props,
    });
  }
  return result;
}

并像这样传递 useTransition 钩子的结果：

import React, { useState } from "react";
import { animated, config, useTransition } from "react-spring";

// import above code
import { reverseTransition } from "utils/animation";

export default function App() {
  const items = [1, 2, 3, 4];
  const [isToggled, setToggled] = useState(false);

  const transitions = useTransition(isToggled ? items : [], item => item, {
    config: config.gentle,
    unique: true,
    trail: 250,
    reverse: isToggled ? false : true,
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div className="App">
      <button onClick={() => setToggled(!isToggled)}>Toggle</button>

      {(isToggled ? transitions : reverseTransition(transitions)).map(({ item, key, props }) => (
        <animated.div key={key} style={props}>
          Issue #{item}
        </animated.div>
      ))}
    </div>
  );
}

您将获得内容相同的反转动画。希望对你有帮助！

Codesandbox

注意：我使用的是 React Spring v8，而不是 v9（您在 Codesandbox 中使用的那个）

问候

【讨论】：