Topic: Animation of Icon not working

Koji Matae premium asked 2 years ago


I did almost the same implementation as "https://mdbootstrap.com/docs/angular/modals/customization/#dangerModalSec".But the check icon does not animate.I installed animation.css and added it to Angular.json.

I have implemented it in Angular10. Is this the cause?

"CENTRAL MODAL" of "https://mdbootstrap.com/docs/angular/modals/customization/#dangerModalSec" is animated.

Source(HTML)

                <mdb-icon fas icon="check" size="4x" class="mb-3 animated bounce infinite"></mdb-icon>

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/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
          "node_modules/animate.css/animate.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/easy-pie-chart/dist/easypiechart.js",
          "node_modules/screenfull/dist/screenfull.js",
          "node_modules/hammerjs/hammer.min.js"
        ]

Thank you.


Arkadiusz Idzikowski staff commented 2 years ago

MDB 9.x.x is not compatible with Angular 10. I'm not sure if this is the cause of the problem, but we still don't recommend to use Angular 10 with MDB until we release MDB v10.

Did you install the animate package from npm? Are there any errors in the console when you display the modal?


Koji Matae premium commented 2 years ago

Thank you for the information.

I will wait for MDB v10 to be released.

I found a solution.When I used a class called "animate_animated animate_bounce animate__infinite" instead of "animated bounce infinite", the animation worked.

Thanks.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Macbook pro
  • Browser: chome
  • OS: MacOS10.15.6
  • Provided sample code: No
  • Provided link: Yes