score:6

Accepted answer

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.

score:1

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.


Related Query

More Query from same tag