React Spring 使用Spring 钩子在从状态到状态之间切换没有动画

Question

我一直试图让一些 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.

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

Answer 1

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

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

这为文本提供了渐变颜色，但我早该知道这会阻止动画不透明度之类的事情。

React Spring 使用Spring 钩子在从状态到状态之间切换没有动画

React Spring useSpring hook switching between from state and to state without animation

javascript

reactjs

react-spring