SideNav not showing - transition error


Topic: SideNav not showing - transition error

Whittaker pro asked 6 years 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 6 years 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 commented 5 years 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 5 years ago

Hi @grensesnitt,

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

Best regards, Konrad.


grensesnitt commented 5 years 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 5 years 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.

FREE CONSULTATION

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

Status

Resolved

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