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>
)};

第一次使用React-Transition-Group

1 个答案: