Question

伙计们！需要帮忙。使用CSSTransition和TransitionGroup尝试通过淡入淡出效果重新渲染组件。第一帧中的淡入淡出。我想要第一帧后消失的第二个出现。但是第一个很快消失，而没有减弱效果，第二个出现了效果。

因此，使用faderin一切正常，但退出不起作用。

使用开发人员工具查看时，我看到出现在元素上的类.fade-appear.fade-appear-active出现了，但是没有任何元素上的类消失了。显然在没有任何作用之后。

所以，伙计们！该怎么办！错误在哪里？

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

class Thumbnail extends React.Component {
    render() {
        return (
            <React.Fragment>
                <TransitionGroup component={null} className="someClass">
                    <CSSTransition
                        in={ true }
                        appear={ true }
                        timeout={{enter:3000, exit: 3000}}
                        key={this.props.productId}
                        classNames="fade"
                        onExit={() => {
                            console.log('exit')
                          }
                        }
                     >
                <div className="col-lg-3 col-md-4 col-xs-6 mb-3">
                    <div onClick={ () => this.props.chooseProduct(this.props.productId) } className="d-block mb-0 h-100 thumbnail">
                        <img className="img-fluid img-thumbnail" src={`img/catalog/${this.props.img}`} alt="" />
                        <h6 className="h6 text-center text-dark">{ this.props.title }</h6> 
                    </div>
                </div>
                    </CSSTransition>
                </TransitionGroup>
            </React.Fragment>
        )
    }
}

export default Thumbnail;

.fade-enter {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition:  all 5000ms linear;
}
.fade-enter.fade-enter-active {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition:  all 5000ms linear;
}
.fade-exit {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 5000ms linear;
}
.fade-exit.fade-exit-active {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition:  all 5000ms linear;
}

.fade-appear {
  opacity: 0;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: all 5000ms linear;
}

反应csstransition淡入淡出（淡入淡出）

0 个答案: