Topic: Angular animation restart

chris-clarkson premium asked 4 years ago

I am using some of the angular animations currently. I want to be able to restart an animation when a button is clicked, is this possible? If so, how would I go about implementing this?


Bartosz Termena staff answered 4 years ago

Dear @chris-clarkson

Just set the animation property via TypeScript to empty string, and then set a timeout that changes the property to class name, so it inherits from the CSS again.

Here is an example:


   <div class="container">
      <div class="row">
        <div class="col-md-12 mx-auto my-5">
            class="animated "
    <button mdbBtn color="primary" (click)="animate()">bounce!</button>


myClass = '';

  animate() {
    this.myClass = '';
    setTimeout(() => {
      this.myClass = 'bounce';
    }, 0);

Hope it helps!

Best Regards, Bartosz.

Lord Samuel free commented 3 years ago


is the same thing possible with

Arkadiusz Idzikowski staff commented 3 years ago

@Lord Samuel I think the original question was about this library, so this solution should help. As you can see in our documentation, we use animate.css for our animations:

Please let us know if you encounter any problems.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No