Topic: SideNav not showing - transition error
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;
} FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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.