React Spring 翻译动画不起作用，点击列表项似乎有延迟

Question

我在菜单中有一个简单的选项列表，如下所示：

Option 1
Option 2
Option 3

当用户点击一个选项时，应该有一个突出显示的栏，显示他们选择了哪个选项。当用户点击不同的选项时，突出显示的栏应该根据他们的选择上下滑动。我正在尝试使用 react-spring，但我似乎无法让动画和点击行为正常发生。

使用我当前的代码，突出显示的栏不会上下滑动；它只是在用户选择时显示和隐藏。单击一个选项一次不会在其上放置突出显示的栏，相反，我必须单击两次才能使其正确显示在所选选项上。

感谢帮助！这是我第一次使用 react-spring 所以我对此有点迷茫。

下面是动画和渲染组件的代码片段：

  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [previousIndex, setPreviousIndex] = useState<number>(0);

  const onClick = (name: string, index: number) => {
    setPreviousIndex(currentIndex);
    setCurrentIndex(index);
    setSpring(fn());
  };

  // Spring animation code
  const fn = () => (
    {
      transform: `translateY(${currentIndex * 52}px)`,
      from: {
        transform: `translateY(${previousIndex * 52}px)`,
      },
    }
  );
  const [spring, setSpring] = useState<any>(useSpring(fn()));

  // Rendering component
  return (
    <div>
      {options.map((option, index) => (
        <>
          {currentIndex === index && <animated.div style={{...spring, ...{ background: 'orange', height: 52, width: '100%', position: 'absolute', left: 0, zIndex: 1}}}></animated.div>}
          <div onClick={() => onClick(option.name, index)}>
            <TextWithIcon icon={currentIndex === index ? option.filledIcon : option.outlineIcon} text={option.name} />
          </div>
        </>
      ))}
    </div>
  );

这里是自定义组件，TextWithIcon:

// Interfaces
interface TextWithIconProps {
  containerStyle?: Record<any, any>;
  icon: ReactElement;
  text: string;
  textStyle?: Record<any, any>;
}

// TextWithIcon component
const TextWithIcon: React.FC<TextWithIconProps> = ({ containerStyle, icon, text, textStyle}) => {
  return (
    <div id='menu-items' style={{...styles.container, ...containerStyle}}>
      {icon}
      <Text style={{...styles.text, ...textStyle}}>{text}</Text>
    </div>
  )
};

Answer 1

您必须将 useSpring 参数内的配置属性的持续时间属性设置为一个值。请尝试以下操作：

const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [previousIndex, setPreviousIndex] = useState<number>(0);

  const onClick = (name: string, index: number) => {
    setPreviousIndex(currentIndex);
    setCurrentIndex(index);
    setSpring(fn());
  };

  // Spring animation code
  const fn = () => (
    {
      transform: `translateY(${currentIndex * 52}px)`,
      from: {
        transform: `translateY(${previousIndex * 52}px)`,
      },
config: {
duration: 1250 //this can be a different number
}
    }
  );
  const [spring, setSpring] = useState<any>(useSpring(fn()));

  // Rendering component
  return (
    <div>
      {options.map((option, index) => (
        <>
          {currentIndex === index && <animated.div style={{...spring, ...{ background: 'orange', height: 52, width: '100%', position: 'absolute', left: 0, zIndex: 1}}}></animated.div>}
          <div onClick={() => onClick(option.name, index)}>
            <TextWithIcon icon={currentIndex === index ? option.filledIcon : option.outlineIcon} text={option.name} />
          </div>
        </>
      ))}
    </div>
  );

参考文献：

计算器溢出。 React 中的动画持续时间 Spring. （2021 年 8 月 23 日访问）。

React Spring 翻译动画不起作用，点击列表项似乎有延迟

React Spring translate animation not working and clicking on a list item seems to be delayed

typescript

reactjs

react-spring