React spring useTransition 状态更新修改现有组件

Question

我正在使用 react-spring 为文本列表中的过渡设置动画。我的动画目前看起来像这样：

如您所见，现有组件中的文本也在更新，而我希望它保持不变。

这是我正在尝试的：

import {useTransition, animated} from 'react-spring'
import React from 'react'

function useInterval(callback, delay) {
  const savedCallback = React.useRef();

  // Remember the latest callback.
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  React.useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
}

function App() {
  const [copyIndex, setCopyIndex] = React.useState(0);
  const transitions = useTransition(copyIndex, null, {
    from: { opacity: 0, transform: 'translate3d(0,100%,0)', position: 'absolute'},
    enter: { opacity: 1, transform: 'translate3d(0,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(0,-50%,0)' }
  });
  const copyList = ["hello", "world", "cats", "dogs"];

  useInterval(() => {
    setCopyIndex((copyIndex + 1) % copyList.length);
    console.log(`new copy index was ${copyIndex}`)
  }, 2000);
  return (
    transitions.map(({ item, props }) => (
      <animated.div style={props} key={item}>{copyList[copyIndex]}</animated.div>
    ))
  )
}

export default App;

关于如何让它按预期工作有什么想法吗？非常感谢！

Answer 1

让过渡来管理您的元素。使用元素而不是索引。像这样：

const transitions = useTransition(copyList[copyIndex], item => item, {

...

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

React spring useTransition 状态更新修改现有组件

React spring useTransition state updates modifying exiting component

reactjs

react-spring