Updating animation / transitions
Hi, I am running an older version of Metronic on React, and would like to update the code to use the new animations.
For example, https://preview.keenthemes.com/metronic8/react/demo7/dashboard when clicking on New Member, the popup is more smoothly transitioned, and not instant.
Where can I find it in the code?
Replies (4)
Hi,
Thank you for reaching out to us.
If you want to remove menu animation you can set $menu-dropdown-animation to false in file src/assets/sass/core/components/_variables.scss.
This will remove animation from all menu instances in the whole project.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you, I am actually trying to add the animations. For example:
Via this link: https://preview.keenthemes.com/metronic8/react/demo7/dashboard
- Click on New Member
- You can see the animation / transition is very fluid
Other link: https://preview.keenthemes.com/metronic8/react/demo7/apps/user-management/users
- Click on Add User
- You can see it is instant and no animation
How do I get the opening of modals to use an animation?
Hi,
Modal on user-managment page is used as a static modal, and it is rendered conditionally in the file src/app/modules/apps/user-management/users-list/UsersList.tsx.
To add a transition for this modal you need to make this modal dynamic, you can refer to examples on react-bootstrap modal docs page.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
To find the code responsible for the smooth transition animation of the popup when clicking on "New Member" in the Metronic React admin template, you can inspect the elements on the smash karts webpage and examine the code.
