моя реакция CSSTransition не работает - PullRequest
Новая
       20

моя реакция CSSTransition не работает

0 голосов
/ 24 декабря 2018

Попытка добавить 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 ;
  }

1 Ответ

0 голосов
/ 24 декабря 2018

С 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>
...