8

So, my problem is that I have a component, I associated an animation to it and it is working when the component is rendered for the first time, but on an event click I change some conditions and some props associated to this component, But my element is not re rendered, it is just changing what has been changed, that means that the element is not removed from the dom et added to the DOM again, that's why I am not able to see the animation again, so it is not re-rendered or I just did not get what re render means.

I tried some solutions of course, but I am stuck, I tried to use this method :

this.forceUpdate();

But again, I am still not getting anything.

I dont think I have to write the whole code I wrote, becuase it is a lot and includes many other things but This is what I think is needed.

methodWillReceiveProps in my component :

  componentWillReceiveProps(props) {
    if (props.isRerendered) {
      this.forceUpdate();
    }
  }

props.isRendered is returning true everytime, I checked with some console.log methods.

This is what is rendered :

render() {
    return (
      <div
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

And here is the sass file and the simple fading animation :

.tls-forms {
  animation: formFading 3s;
  // childs properties here 
}

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

I will really appreciate any help given.

6
  • 2
    After React rerender component it compares new render with the old one. And update only part that is changed. So you may try to add key prop to your div. Update this key value when you need run animation. Aug 22, 2019 at 18:47
  • 1
    Do you want to re-animate upon onClick event? Aug 22, 2019 at 18:48
  • @user9408899 Yes I want to re animate.
    – TaouBen
    Aug 22, 2019 at 18:51
  • @PavloKovchuk so React rerendering method does not remove elements from dom and add them again ?
    – TaouBen
    Aug 22, 2019 at 18:51
  • 1
    @TaouBen reactjs.org/docs/rendering-elements.html "React Only Updates What’s Necessary" part Aug 22, 2019 at 18:58

2 Answers 2

6

You could make use of keys that react is using to determine whether something has changed. This means that your render method should look something like this:

import shortid from "shortid";

getRandomKey = () => {
    return shortid.generate();
}

render() {
    return (
      <div
        key={this.getRandomKey()}
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

Since you need to run animation on each render, you'll need to generate some random key every time (that's why we are calling this.getRandomKey() on each render). You can use whatever you like for your getRandomKey implementation, though shortid is pretty good for generating unique keys.

1
  • 1
    I have implemented a solution already and it is working, but your idea look wonderful, not too much code! Thank you, I ll think of it to make my code with better quality.
    – TaouBen
    Aug 23, 2019 at 0:16
2

One way of animating a component is to attach a CSS class to it. But, when animation is done, you have to detach the CSS class so that you can re-attach when you want to animate again.

Here is a basic example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animateFlag: false
    };
  }

  componentDidUpdate() {
    if (this.state.animateFlag) {
      setTimeout(() => {
        this.setState({ animateFlag: false });
      }, 3000);
    }
  }

  render() {
    return (
      <div className="App">
        <button
          onClick={() =>
            this.setState({ animateFlag: !this.state.animateFlag })
          }
        >
          {this.state.animateFlag ? "Wait" : "Re-animate"} 
        </button>
        <div className={this.state.animateFlag ? "text animate" : "text"}>
          Hello CodeSandbox
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.text {
  font-size: 40px;
}

.text.animate {
  animation: formFading 3s;
}

@keyframes formFading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Note that, I am setting animateFlag to false in ComponentDidUpdate, so that when I click the Re-animate button again, I can re-attach the animate class to the div element.

I set timeout duration to 3000ms because, the animation takes 3000ms.

1
  • This is what I have done already, I just wanted a solution with less code, Thank you!
    – TaouBen
    Aug 23, 2019 at 0:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.