Modal Animation not working (Fade)


Topic: Modal Animation not working (Fade)

ggedde asked 5 years ago

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


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


ggedde answered 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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
Tags