CODEWITHSUNDEEP
javascriptreactjs
JS-JMS-WEB
JS-JMS-WEB

Reputation: 2625

reactjs - animate single DOM element without re-rendering component

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?

Upvotes: 1

Views: 950

Answers (1)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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.

Upvotes: 2

Related Questions