1

我有一个图像查看器组件，它是一个大图像，下面是 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/

4

1 回答 1

0

我不确定，但您必须将所有图像包装成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>
)};
于 2018-05-03T02:41:14.450 回答