Animation of Icon not working

Topic: Animation of Icon not working

Koji Matae priority asked 3 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 3 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 priority commented 3 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
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

Koji Matae

5Support score
1Questions 0Answers 0Snippets