Впервые использую React-Transition-Group

Question

У меня есть компонент просмотра изображений, как одно большое изображение и 3 меньших под ним. Когда вы наводите курсор на одно из нижних изображений, оно меняет большое изображение на соответствующее изображение. Я хотел бы добавить переход постепенного исчезновения / исчезновения, когда изображение большего размера изменяется. До сих пор я могу получить постепенное исчезновение и постепенное исчезновение мыши, полностью оставляя маленькое изображение, но не зависая между изображениями. Вот мой код:

import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
import Image0 from './Image1.jpg'
import Image1 from './Image2.jpg'
import Image2 from './Image3.jpg'
import './ImageViewer.css';

const duration = 300;
const Images = [Image0, Image1, Image2]

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting: { opacity: .9 },
  exited: { opacity: 0.01 }
};

const Fade = ({ in: inProp, currentImage }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        <img src={currentImage}/>
      </div>
    )}
  </Transition>
);

class App extends Component {
  state = { show: false, currentImg: Images[0] }
  handleClick = e => {
    this.setState({
      show: !this.state.show,
      currentImg: Images[Number(e.currentTarget.dataset.id)]
    })
  }
  render() {
    return (
      <div className="App">
        <Fade in={this.state.show} currentImage={this.state.currentImg}/> 
          <div className="small_image_wrapper">
          <img  className="small_image" 
                src={Image0} 
                alt="A wonderful bed"
                data-id={0}
                onMouseOver={this.handleClick}
                onMouseOut={this.handleClick}
            />
          <img  className="small_image"
                src={Image1} 
                alt="A wonderful bed"
                data-id={1}
                onMouseOver={this.handleClick}
                onMouseOut={this.handleClick}
            />
          <img  className="small_image"
                src={Image2} 
                alt="A wonderful bed"
                data-id={2}
                onMouseOver={this.handleClick}
                onMouseOut={this.handleClick}
            />

        </div>
      </div>
    );
  }
}

export default App;

Также вот ссылка на то, что у меня пока есть с переходами: https://peaceful-jones-ee2ca2.netlify.com/ И без переходов: https://practical-lamport-9cc94e.netlify.com/

Answer 1

Я не уверен, но вы должны обернуть все свои изображения в TransitionGroup

import {TransitionGroup}, {Transition} from 'react-transition-group';
...
render() {
return (
  <div className="App">
    <TransitionGroup>
       <Fade in={this.state.show} currentImage={this.state.currentImg}/> 
    </TransitionGroup>
    <div className="small_image_wrapper">
       /* here comes small images */
    </div>
  </div>
)};