MDB Bootstrap for Angular Animation not working

Question

I am simply trying to add mdb-bootstrap animation into my angular project but the animation is not working. I just follow the instruction of basic mdb animation MDB Bootstrap Animation . It is working at MDB EDITOR but when I put the same code in my angular project it is not working. My trying code is

// angular.json 
"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],

// html
<img
  class="animated bounce infinite"
  src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
/>

score 1 · Answer 1 · edited Dec 02 '20 at 09:55

Recently, I've faced the same issue - when I was trying to add animation, using MDB code examples - they didn't work on my local project.

In my case, the problem was in animate.css library version. Since animate.css has made major 4+ release they've changed the class name convention. Now you need to add the prefix animate__ before each animate class you're using in your code.

<div class="animate__animated animate__slideInDown"></div>

There are two ways to resolve the current MDB animation issue:

Rollback to animate.css@3.7.2 version of animate library
Use the new class name configuration by adding animate__ prefix

Personally, I've chosen the second approach.

MDB Bootstrap for Angular Animation not working

1 Answers1