[英]React-Spring - Change Transition Animation Speed
我正在尝试更改默认淡入和淡出过渡的速度,但文档似乎没有提到如何这样做:
<Transition
items={show}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}>
{show => show && (props => <div style={props}>✌️</div>)}
</Transition>
鉴于此代码,我将如何使淡入/淡出 animation 更快或更慢?
我尝试这样做(如下),但它最终完全打破了过渡。 animation 不再工作:
from={{ opacity: 1, transitionDelay: "5000ms" }}
enter={{ opacity: 1, transitionDelay: "5000ms" }}
leave={{ opacity: 0, transitionDelay: "5000ms" }}
有任何想法吗?
React-spring 使用物理 model。 因此,您可以设置 model 的物理属性,也可以如前所述指定持续时间。 如果您设置持续时间,那么它将切换到基于时间的 model。 但是我们喜欢 react-spring,因为它的物理 model。
我建议调整物理属性。 您可以在此处使用基本属性: https://www.react-spring.io/docs/hooks/api
它们是质量、张力、摩擦。 如果你减少质量和摩擦并增加张力,那么速度也会增加。 您还可以设置初始速度,使用正速度也可以提高速度。 当 animation 不稳定时,速度越快越有可能出现过冲。 您可以使用钳位配置参数停止过冲。 当 animation 到达终点时,它将停止。
以下配置非常快
<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}
试验配置值是一个试错过程。 我建议将您喜欢的配置存储在一个常量中,您可以在更多 animation 中重复使用它。
您必须将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.