【问题标题】:React-Spring - Change Transition Animation SpeedReact-Spring - 改变过渡动画速度
【发布时间】:2025-09-01 14:45:02
【问题描述】:

我正在尝试更改默认淡入淡出过渡的速度,但文档似乎没有提及如何这样做:

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

有什么想法吗?

【问题讨论】:

    标签: javascript css reactjs animation react-spring


    【解决方案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}
    

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

    【讨论】:

    • 谢谢!将此作为正确答案,因为 React-Spring 是作为“基于弹簧物理的动画库”创建的。持续时间也适用于需要非常具体的基于时间的方法的人,我不需要
    • @Phillip 如果有一个助手可以根据持续时间和弹跳百分比创建这些值,那就太酷了。
    【解决方案2】:

    您必须将 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>
    
    

    【讨论】: