javascript - React-Spring - 改变过渡动画速度

Question

我正在尝试更改默认淡入和淡出过渡的速度，但文档似乎没有提及如何操作:

<Transition
  items={show}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>

鉴于此代码，我如何使淡入/淡出动画更快或更慢？

我尝试这样做(如下)，但它最终完全破坏了过渡。动画不再有效:

from={{ opacity: 1, transitionDelay: "5000ms" }}
enter={{ opacity: 1, transitionDelay: "5000ms" }}
leave={{ opacity: 0, transitionDelay: "5000ms" }}

有什么想法吗？

Answer 1

React-spring 使用物理模型。因此，您可以设置模型的物理属性，也可以如前所述指定持续时间。如果您设置持续时间，则它会切换到基于时间的模型。但是我们喜欢 react-spring 是因为它的物理模型。

我建议调整物理属性。你可以在这里玩基本属性:https://www.react-spring.io/docs/hooks/api

它们是质量、张力、摩擦力。如果你减少质量和摩擦并增加张力，那么速度也会增加。您还可以设置初始速度，使用正速度也可以提高速度。速度越高，越有可能出现超调，此时动画会不稳定。您可以使用钳位配置参数停止过冲。它会在到达终点时停止动画。

下面的配置还是挺快的

<Transition
  items={show}
  config={mass:1, tension:500, friction:18}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>

如果你想要更快，你可以减少摩擦，你可能想要停止超调。例如:

config={mass:1, tension:500, friction:0, clamp: true}

用配置值进行试验是一个试错过程。我建议将你喜欢的配置存储在一个常量中，你可以在更多动画中重用它。