javascript - 我的 React CSSTransition 动画不起作用

Question

尝试将 CSSTransition 添加到我的 React 应用程序中，但我遇到了这个问题。当我说唱我想要动画的元素时，它会变成空白。任何帮助，将不胜感激。这是我的代码

 render() {
    return (
        <div>
            <div id="wrapper">
                <div id="quotes-box">
                    <CSSTransition
                        in={true}
                        appear={true}
                        timeout={500}
                        classNames="fade"
                    >
                        <div className="quote-text fade" ><FontAwesomeIcon icon={faQuoteLeft} size="lg" />{this.selectedQuote ? " " + this.selectedQuote.quote + " " : ""}<FontAwesomeIcon icon={faQuoteRight} size="lg" /></div>
                    </CSSTransition>
                    <div className="quote-author" >{this.selectedQuote ? this.selectedQuote.author : ""}</div>
                    <Button className="btn btn-success btn-lg float-right" onClick={this.next}>New Quotes</Button>
                    <Button className="btn btn-success btn-lg float-left" ><FontAwesomeIcon icon={faGithub} />{"  "} Github</Button>
                </div>
                <div className="footer"> by Yakubu Ahmed El-rufai</div>
            </div>
        </div>
    )
}

这是我的 css 文件

     //enter
   .fade-enter{
    opacity: 0;
   }
   .fade-enter-active{
    opacity: 1;
    transition: opacity 500ms linear;
   }
    //exit
   .fade-exit{
    opacity: 1;
   }
  .fade-exit-active{
  opacity: 0.2;
  transition: opacity 500ms linear ;
  }
  .fade-exit-done{
  opacity: 0;
  }

  //on load
  .fade-appear{
  opacity: 0;
  }
  .fade-appear-active{
   opacity: 1;
   transition: opacity 500ms linear ;
  }

Answer 1

使用 CSSTransition，您需要为 in 提供一个会更改的值，因为您指定了 true，所以它不会执行任何操作。在下面的解决方案中，我在 loaded 状态下设置了一个值，并使用它来使 CSSTransition 工作。

const { Component } = React;
const { CSSTransition } = ReactTransitionGroup;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    }
    this.loadQuote = this.loadQuote.bind(this)
  }
  loadQuote() {
    this.setState({ loaded: !this.state.loaded });
  }
  render() {
    const { loaded } = this.state;
    return (
      <div>
        <CSSTransition
            in={loaded}
            timeout={500}
            classNames="fade"
        >
            <div className="fade">Some Quote Text</div>
        </CSSTransition>
        <button onClick={this.loadQuote}>Load Quote</button>
      </div>
    )
}
}

ReactDOM.render(<App />, document.getElementById('root'));

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  opacity: 1;
  transition: opacity 500ms linear;
}
.fade-exit{
  opacity: 1;
}
.fade-exit-active{
  opacity: 0.2;
  transition: opacity 500ms linear ;
}
.fade-exit-done{
  opacity: 0;
}
.fade-appear{
  opacity: 0;
}
.fade-appear-active{
  opacity: 1;
  transition: opacity 500ms linear ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.5.2/react-transition-group.js"></script>
<div id="root"></div>