React Spring使用Spring钩子在无动画的状态和状态之间切换答案

【问题标题】：React Spring useSpring hook switching between from state and to state without animationReact Spring使用Spring钩子在无动画的状态和状态之间切换
【发布时间】：2022-01-08 14:49:45
【问题描述】：

我一直试图让一些 div 在屏幕上可见时简单地淡入。也许我遗漏了一些东西，但这是代码。

我正在使用模块 React-Spring V9 和 React-Visibility-Sensor。

父组件的渲染：

{
    ArrayOfText.map(text => (
        <VisibilitySensor key={text}>
            {({ isVisible }) => (
                <MyItem isVisible={isVisible} text={text} />
            )}
        </VisibilitySensor>
    ))
}

子组件：

export default function MyItem({ text, isVisible }) {

    const animatedStyle = useSpring({
        config: { ...config.gentle },
        to: {
            opacity: isVisible ? 1 : 0
        }
    });

    return (
        <animated.div style={animatedStyle} className='large-header-text'>
            {text}
        </animated.div>
    );
}

这样做的原因是 div 在进入视野后会稍微延迟出现在屏幕上。我遇到的问题是没有动画。它只是不透明度 0，然后等待 ~1 秒，然后立即不透明度：1。

如果有人之前遇到过这个问题，请告诉我你是如何解决的！谢谢。

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

我发现了问题。我怀疑这对其他人有帮助，但它没有动画的原因是因为我试图让文本淡入并应用以下样式：

background: -webkit-linear-gradient(60deg, #1369BF, #B07D2E, #8FD714);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这会给文本一个渐变色，但我应该知道这会阻止像动画不透明度这样的事情。

【讨论】：