Как поменять порядок анимации в переходной пружине при использовании переходов - PullRequest
Новая
       18

Как поменять порядок анимации в переходной пружине при использовании переходов

0 голосов
/ 04 марта 2020

Я хочу анимировать непрозрачность элементов с номерами от 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

1 Ответ

0 голосов
/ 29 марта 2020

Проблема с методом 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)

С уважением

...