是否可以使用React对IMG SRC更改应用弹簧动画

Question

在我的 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>
    )
}

Answer 1

如果您只希望淡入淡出的淡出，请确保每个图像都有不同的键。在这种情况下，反应将重复初始效果。

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

如果您也想淡出淡出的效果。我会尝试过渡组件而不是弹簧组件。