Topic: Animation of Icon not working
Koji Matae priority asked 4 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
Arkadiusz Idzikowski staff commented 4 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 4 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.