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

Question

在我的 react 应用程序中，我尝试使用 react-spring 在 src 更改时淡入图像。我在 /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

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

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

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

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

Is it possible to apply Spring-animation on img src change using React?

javascript

reactjs

animation

react-spring