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

您必须将config道具添加到Transition并在其中传递持续时间：

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

Answer 2

反应弹簧使用物理模型。因此，您可以设置模型的物理属性，也可以如上所述指定持续时间。如果设置持续时间，则它将切换到基于时间的模型。但是由于其物理模型，我们喜欢反应弹簧。

我建议调整物理属性。您可以在此处使用基本属性：https://www.react-spring.io/docs/hooks/api

它们是质量，张力，摩擦。如果减少质量和摩擦并增加张力，则速度也会增加。您还可以设置初始速度，以正速度也可以提高速度。当动画不稳定时，以更高的速度出现超调的可能性更大。您可以使用clamp config参数停止过冲。当动画到达其端点时，它将停止。

以下配置非常快

<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}

尝试使用配置值是一个尝试错误过程。我建议将所需的配置存储在一个常量中，然后可以在更多动画中重复使用它。

React-Spring-更改过渡动画速度

2 个答案: