Можно ли применить Spring-анимацию к изменению img src с помощью React? - PullRequest
Новая
       23

Можно ли применить Spring-анимацию к изменению img src с помощью React?

1 голос
/ 02 мая 2019

В моем приложении 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>
    )
}

1 Ответ

1 голос
/ 03 мая 2019

Если вы просто хотите, чтобы эффект затухания действовал, убедитесь, что у каждого изображения есть свой ключ. В этом случае реакция будет повторять первоначальный эффект. 

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

Если вы хотите также эффект затухания. Я бы попробовал компонент Transition вместо компонента Spring.

...