Topic: animated doesn't animate
$(container).addClass("animated fadeOut fast");
$(container).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {DoStuff();});
This should add the classes to the container, fade it out, and then perform the tasks in DoStuff.
Actual behavior The container receives the animated and fadeOut classes, but it never animates. Therefore, the DoStuff doesn't happen.
This routine in the app works on most computers, but I have one client who has a windows 10 / Chrome 80 machine that doesn't animate.
I need to know what possible issue is causing the animation to not work and handle it in the code. Is it a browser setting of some sort? How do I troubleshoot this? I've tried Incognito on that machine and it still doesn't work, so it's not a profile issue. It works in Edge on that same computer.
Resources (screenshots, code snippets etc.)
Actually, now that I think about it, I should really have a separate css rule that is loaded after mdb.css in order to turn those switches back off. Otherwise, if I update MDB, I'm going to forget to fix this.
I believe that the assumption here to reduce animation treats animation as a cosmetic element, where in a true material-design methodology, those visual elements are crucial. In my case, I'm requiring the animations to properly render the experience of the website. Yes it is a visual effect, but it's purposeful.
So my suggestion might be to add to the bottom of your mdb.css the code to undo the animate.css switches here so that animations always work to preserve the material design experience.
Grzegorz Bujański staff commented 4 years ago
We don't really plan such solutions on our side. The option to disable animation in the widnows system was created for people who have a problem with the reception of animated content and for health reasons must disable the animation. That's why this CSS rule has been added. We know that this option is often turned off to speed up the system. But we can not ignore the original purpose of this solution.
I've made the change to comment out the lines in mdb.css and I believe it resolved.
/*
@media (prefers-reduced-motion) {
.animated {
-webkit-transition: none !important;
transition: none !important;
-webkit-animation: unset !important;
animation: unset !important
}
}
*/
I found this link regarding animate.css that seems to indicate that Chrome and Firefox seek out the animation setting from the OS and disabled animations: How do I use this to update my app? GitHub - Animate.css
Grzegorz Bujański staff commented 4 years ago
Hi. If you use scss you can edit scss/free/modules/_animations-basic.scss and files inside scss/free/modules/animations-extended folder.
If you use css you can try edit mdb.css, find animate.css code and replace this.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.13.0
- Device: Windows
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: No