javascript - 在使用 React Transition Group Component 构建轮播时，我缺少什么？

Question

我只是想让图像之间的不透明度发生变化。我正在构建一个旋转木马，一旦您单击图标，图像就会发生变化。我相信我缺少一个或两个属性，或者我正在使用它的逻辑和方法是正确的，但我发现我见过的其他示例之间没有太大区别。由于某种原因，React 过渡组没有添加效果。使用 RTG Component 构建旋转木马时，我缺少什么？我将不胜感激任何帮助。提前致谢。这是我的代码。

   // == APP COMPONENT
         import React, { Component } from 'react';
            import './css/app.css';
            import HeroImg from './HeroImg';

            import ReactCSSTransitionGroup from 'react-addons-css-transition-group';


            class App extends Component {
              state = {
                imgID: 1,
                activeImgID: 1,  
              }

              carouselSwitch = (e) => {        
                  this.setState({imgID: e.target.getAttribute('id') - 1,
                                activeImgID: e.target.getAttribute('id') - 1});

      }
              render() {

          return (
                  <div className="container">
                    <div className="heroImg-container">

                      <ReactCSSTransitionGroup
                        transitionName="fade"
                        transitionEnterTimeout={1000}
                        transitionLeaveTimeout={1000}>

                            <HeroImg index={this.state.imgID} />
                      </ReactCSSTransitionGroup>

                      <div className="carousel-btns-wrapper">
                        <div className="carousel-btns">             
                          <i id={1} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 0 ? 'right active' : 'up' }`} />
                          <i id={2} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 1 ? 'right active' : 'up' }`} />
                          <i id={3} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 2 ? 'right active' : 'up' }`} />
                          <i id={4} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 3 ? 'right active' : 'up' }`} />
                        </div>
                      </div>{/* END CAROUSEL-BTNS-WRAPPER */}

                    </div> {/* END HEROIMG-CONTAINER */}
                  </div> /* END CONTAINER */
                 );
              }
            }

            export default App;



    // == HEROIMG Component  
        import React, { Component } from 'react';

        import Stage1 from './images/carousel/stage1.jpg';
        import Stage2 from './images/carousel/stage2.jpg';
        import Stage3 from './images/carousel/stage3.jpg';
        import Stage4 from './images/carousel/stage4.jpg'; 

        class HeroImg extends Component {

            render() {
                const srcs = [Stage1, Stage2, Stage3, Stage4];
                let src = srcs[this.props.index];
                return <img className="fade" src={src} alt='Military Images Carousel'  />;
            }
        } 

        export default HeroImg;

// == CSS
    .fade-enter {
      opacity: 0.01;
    }

    .fade-enter.fade-enter-active {
      opacity: 1;
      transition: opacity 500ms ease-in;
    }

    .fade-leave {
      opacity: 1;
    }

    .fade-leave.fade-leave-active {
      opacity: 0.01;
      transition: opacity 300ms ease-in;
    }

Answer 1

“CSS 过渡组的工作原理是将过渡类应用于进入和退出其子元素的子元素(通过按键跟踪)。” [ from this answer ]

尝试:

<HeroImg index={this.state.imgID} key={this.state.imgID}/>