第一次使用React-Transition-Group

Question

I have a image viewer component that as one large image and 3 smaller ones below it. When you hover over one of the bottom images it changes the large image to the corresponding image. I would like to add a fade-in/fade-out transition when the larger image changes. So far I can get a fade-in and a fade-out on the mouse completely leaving the smaller image but, not hovering between the images. Here is my code:

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;

Also here's a link to what I have so far with transitions: https://peaceful-jones-ee2ca2.netlify.com/ And without transitions: https://practical-lamport-9cc94e.netlify.com/

Answer 1

I am not sure but you have to wrap all your images into 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>
)};