CODEWITHSUNDEEP
javascriptreactjsreactcsstransitiongroup
yrufai
yrufai

Reputation: 61

my react CSSTransition animation not working

Trying to add CSSTransition to my react app but i am faced with this problem. when i rap the element i want to animate it turns blank. any help would be appreciated. here is my code

 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>
    )
}

and here is my css file

     //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 ;
  }

Upvotes: 0

Views: 5061

Answers (1)

AnonymousSB
AnonymousSB

Reputation: 3594

With CSSTransition, you need to supply in with a value that will change, since you specify true, it doesn't do anything. In my solution below, I set a value in state of loaded and use that to make CSSTransition work.

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>

Upvotes: 3

Related Questions