Topic: Modal Animation not working (Fade)
Expected behavior
Modals should be animated when opening when using the .fade class
Actual behavior
Modals open without animation.
Resources (screenshots, code snippets etc.)
This is also happening on the main MDB Docs. https://mdbootstrap.com/docs/jquery/modals/basic/
How can I get the modals to open with animation like they do on normal Bootstrap? Thanks
I don't have any errors related to that. I checked with Safari and Firefox and non of them show an animation.
Here is a video: https://www.screencast.com/t/dGmS2yk3
However, if I go to Bootstrap 4: https://getbootstrap.com/docs/4.0/components/modal/
Then animation is working.
Grzegorz Bujański staff commented 5 years ago
I check this on my Mac. I reproduce this by enabling reduce motion options (system preferences > accessibility > display > reduce motion). Do you have this option enabled?
ggedde commented 5 years ago
Wow! that worked. Thanks for the help!
However, I don't think that animation should be based on this setting. In my opinion these should be related to the OS animations and not affect website animations, but I do understand that many other may disagree.
Is there another way around this? I don't want to allow my OS to do animations, but I do want the modal to animate. Any suggestions?
ggedde commented 5 years ago
Also I think the documentation should be updated to reflect this. Thanks
Grzegorz Bujański staff commented 5 years ago
We will deal with the problem of animation of our components. At the moment we have no suggestions on how to make the components animate if in the system options the animations are turned off.
I think I have the answer for you as I had the same problem I think what caused this problem is something called prefers-reduced-motion you could search it off, As I'm still researching it. basically, it is a feature in pretty much all devices and what it does is reduces the animation effect to save power so you need to turn that off to show the animation for Windows its called Animation effects and it's off by default so to turn it on 1. Go to accessibility settings by pressing the Windows key, + U. Go to the Vision section and click on Visual Effects 2. Click the toggle switch for Animation effects to turn it on.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.12.0
- Device: Laptop
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 5 years ago
Hi. I checked our documentations twice and all modals open with animation. Did you have any errors in dev tools console?
Best, Grzegorz