reactjs-動畫單個DOM元素而無需重新渲染組件

Question

我有以下反應成分：

return(
            <div className="project-page">
                <div className="jumbotron">
                    <div className="container">
                        <h1>{currentProject.title}</h1>
                    </div>  
                </div>  
                <div className="container ">
                    <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
                        <div className="project-image-container"> 
                            <img src={currentProject.image} alt="Project Image" />
                        </div>
                    </ReactCSSTransitionGroup>  
                    .....

我正在使用ReactCSSTransitionGroup來對圖像進行動畫處理，該圖像在組件的初始負載下效果很好。 但是，當使用新的數據集/圖像更新組件時，動畫不起作用。

我該如何進行這項工作？

Answer 1

當前不支持對更新的內容進行動畫處理。 當前， ReactCSSTransitionGroup只能為要添加或刪除的組件設置動畫。

但是，可以使React認為已刪除或添加了一個組件。 React依靠key屬性來唯一地標識子組件。

因此，您應該能夠執行以下操作：

return(
    var key = projectId;

    <ReactCSSTransitionGroup key={key} transitionName="example" transitionAppear={true}>
          <div className="project-image-container"> 
               <img src={currentProject.image} alt="Project Image" />
          </div>
    </ReactCSSTransitionGroup>  

在此示例中，您必須傳遞唯一的id或任何其他值。 它甚至不必是唯一的。 您只需要使用組件更新中的任何值對其進行更新。

該博客更深入地討論了該主題。