reactjs-动画单个DOM元素而无需重新渲染组件

Question

I have following react component:

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

I'm using ReactCSSTransitionGroup to animate image which works fine on components' initial load. However animation doesn't work when component gets updated with new dataset/image.

How can I make this work?

Answer 1

Animating updated content is not currently supported in react. Currently, ReactCSSTransitionGroup can only animate components that are being added or removed.

However it is possible to make react think that a component has been removed or added. React relies on the key attribute to uniquely identify child components.

So you should be able to do something like this:

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>  

In this example, you must pass unique id or any other value. It doesn't even need to be unique. You just need to update it with any value on component update.

This blog covers this topic in more depth.