Javascript 是否可以使用React在img src更改上应用Spring动画？

在我的

react

应用程序中，当

src

改变时，我试图使用

react-spring

在图像中淡入淡出。我在

/img/

目录中有多个名为的图像，与我要显示的当前

activeIndex

相匹配。目前使用以下代码，淡入效果仅应用于第一幅图像。我做错了什么

import React from 'react';
import { Spring } from 'react-spring/renderprops';

export default function MyComponent(props) {

    const {
        activeIndex
    } = props;

    return (
        <div>
            <Image activeIndex={activeIndex}  />
        </div>
    )
}

function Image(props) {

    const {
        activeIndex
    } = props;

    return (
        <Spring
            from={{opacity: 0}}
            to={{opacity: 1}}
        >
            { props => (
                <div style={props}>
                    <div>
                        <img src={ `/img/${activeIndex}/01.jpg` } alt="" />
                    </div>
                </div>
            )}
        </Spring>
    )
}

从“React”导入React；
从'react Spring/renderprops'导入{Spring}；
导出默认函数MyComponent（道具）{
常数{
活动索引
}=道具；
返回(
)
}
功能图像（道具）{
常数{
活动索引
}=道具；
返回(
{props=>(
)}
)
}

如果您只是想要淡入效果，请确保每个图像都有不同的关键点。在这种情况下，react将重复初始效果

return (
    <div>
        <Image key={activeIndex} activeIndex={activeIndex}  />
    </div>
)

返回(
)

---

如果你也想要淡出效果。我会尝试转换组件而不是Spring组件。

您能分享使用

MyComponent

的代码吗？