如何在具有状态内容的 React 元素上设置 css 转换属性？

Question

我正在尝试对从状态获取内容的元素应用转换属性。在每次状态更改时，我想对元素的不透明度应用 css 转换属性。

下面是我的渲染方法：

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

下面是 css 例如转换名称

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

如何设置 quoteElem 的不透明度过渡？请帮我看看哪里做错了。

Answer 1

我根本不使用 ReactCSSTransition 而是使用关键帧来解决上述问题。

渲染方法如下所示：

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

更新后的 CSS 文件如下所示：

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

#text {
    animation: fadein 1.5s;
}

注意：如果元素内容在状态更改时呈现，并且您想像在 #text

中的这种情况一样应用过渡，请确保具有 key 属性

工作项目托管在 link 以下的 github 页上。

Visit Project

如何在具有状态内容的 React 元素上设置 css 转换属性？

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

reactjs

reactcsstransitiongroup

如何在具有状态内容的 React 元素上设置 css 转换 属性？

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

reactjs

reactcsstransitiongroup

如何在具有状态内容的 React 元素上设置 css 转换属性？