Question

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

 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>

我的反应CSSTransition动画不起作用

1 个答案: