How to set css transition property on react element with state content?

I am trying to apply transition property on the element which gets its content from state. On every state change I want to apply css transition property on the element's opacity.

Below is my render method:

 render() {
        const quoteIcon = <FontAwesomeIcon icon={faQuoteLeft} />
        const quoteElem = <span key={this.state.currQuote["quote"]} id="text">{this.state.currQuote["quote"]}</span>
        return (
            <div id="env" style={{
                backgroundColor: this.state.color,
                color: this.state.color
            }}>
                <div id="quote-box">
                    <div className="text">
                        <div id="quoteIcon">
                            <span>{quoteIcon}</span>
                        </div>
                        <ReactCSSTransitionGroup
                            transitionName="example"
                            transitionAppear={true}
                            transitionAppearTimeout={500}
                            transitionEnterTimeout={500}
                            transitionLeaveTimeout={500}>
                            {quoteElem}
                        </ReactCSSTransitionGroup>
                    </div>
                    <div className="author">
                        <span id="author">{this.state.currQuote["author"]}</span>
                    </div>
                    <div id="new-quote-btn">
                        <button id="new-quote" onClick={this.refreshQuote}>New quote</button>
                    </div>
                </div>
            </div>
        )
    }

Below is the css for example transition name

.example-enter {
    opacity: 0.01;
}

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.example-leave {
    opacity: 0.01;
}

.example-leave.example-leave-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.example-appear {
    opacity: 0.01;
}

How to set transition on opacity for quoteElem? Please help me where I am doing wrong.

I fixed the above issue by not using ReactCSSTransition at all, instead used keyframe.

Render method looks like this:

 render() {
    const quoteIcon = <FontAwesomeIcon icon={faQuoteLeft} />
    const twitterIcon = <FontAwesomeIcon icon={faTwitterSquare} />
    return (
        <div id="env" style={{
            backgroundColor: this.state.color,
            color: this.state.color
        }}>
            <div id="quote-box">
                <div className="text-box">
                    <div id="quoteIcon">
                        <span>{quoteIcon}</span>
                    </div>

                    <span key={this.state.currQuote["quote"]} id="text">{this.state.currQuote["quote"]}</span>

                </div>
                <div id="author">
                    <span>{this.state.currQuote["author"]}</span>
                </div>
                <div id="button-section">
                    <div class="socialButton">
                        <a href="https://twitter.com/intent/tweet" id="tweet-quote" style={{color: this.state.color}}>{twitterIcon}</a>
                    </div>
                    <button id="new-quote" onClick={this.refreshQuote}>New quote</button>
                </div>
            </div>
        </div>
    )
}

And updated CSS file looks like:

@keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

#text {
    animation: fadein 1.5s;
}

Note: Make sure to have key attribute if element content is being rendered on state change and you want to apply transition like in this case in #text

Working project is hosted on github pages at below link.

Visit Project