SideNav not showing - transition error

web
mobile

Topic: SideNav not showing - transition error

Whittaker pro asked a year ago

After upgrading to v.4.8.4 of MDB React Pro, all the CSS animations for the SideNav transition stopped working.

I was able to recreate the issue using the example code for SideNav found at:

https://mdbootstrap.com/docs/react/navigation/sidenav/#usage

The example code worked fine for the right SideNav, but had the same issue for the left SideNav where none of the CSS transitions were applied properly.

I was able to "fix" the issue by copying the appropriate CSS transitions from src/components/Transitions.css into my own CSS file.

Is it possible that the transition code is not being imported properly for the pro component? Or is there something I am missing?

Missing transitions:

.side-slide-enter {
opacity: 0.2;
transform: translateX(-100%);
}

.side-slide-enter-active {
opacity: 1;
transform: translateX(0%);
transition: transform 300ms ease-out, opacity 300ms ease;
}

.side-slide-enter-done {
opacity: 1;
transform: translateX(0);
}

.side-slide-exit {
opacity: 1;
transform: translateX(0%);
transition: all 300ms ease-out;
}

.side-slide-exit-active {
opacity: 0.2;
transform: translateX(-100%);
transition: all 300ms ease-out;
}

Anna Morawska staff commented a year ago

Hi there, thank you for reporting this. I've just checked it out in newly created create-react-app, and it looks like everything works fine.  Do you use our library as a dependency in your project ( defined in package.json), or do you work in our development repository cloned from gitlab? 


grensesnitt pro commented 4 months ago

I had the same problem. I guess this problem is because you don't import mbdreact.js. I fixed it adding this line to index.js

import 'mdbreact/dist/mdbreact';


Konrad Stępień staff commented 4 months ago

Hi @grensesnitt,

Does this apply to the latest versions, or does the bug affect older MDB versions?

Best regards, Konrad.


grensesnitt pro commented 4 months ago

I'm not sure I'll call it a bug. I probably added mdbootstrap to the project manually afterwards and forgot to add the import line, but since it's not mentioned in the getting started guide, it took a while to understand why the sidenav didn't show up (lacking the transform on side-slide-enter-done). I'm at the latest version of mdbootstrap now.


Konrad Stępień staff commented 4 months ago

@grensesnitt, Thank you very much for your feedback! If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards, Konrad.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.7.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Mac OSX
  • Provided sample code: Yes
  • Provided link: Yes