I've encountered an issue with my mobile navigation. I have two navigation menus - one on the left and one on the right, designed to slide out when triggered. The left menu functions correctly with a smooth transition, but the right menu abruptly pops open without any animation.
I've spent the past 4 hours dissecting the CSS code, attempting various transitions to rectify the problem. Despite other components working as intended, I can't seem to achieve the desired smooth slide-out effect on the right menu.
For reference, here's a jsFiddle containing some of the pertinent code: http://jsfiddle.net/Etn6q/
Initially, I followed this tutorial for implementing off-canvas navigation menus:
<div id="outer-wrap">
<div id="inner-wrap">
<div id="top_mobile_bar" class="clearfix">
<a class="nav-btn" id="nav-open-btn" href="#nav">Menu</a>
<a class="nav-btn" id="info-open-btn" href="#info">Info</a>
</div>
Additionally, I've incorporated styles from style.css and made modifications in mobile-flyout-menu.css to include all the necessary transitions:
.csstransforms3d.csstransitions.js-ready #info .block {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
transition: all 0.2s ease 0s;
-webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
-webkit-transition-delay: ease, 0s;
-moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
-o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
transition: opacity 300ms 100ms ease, transform 500ms ease;
-webkit-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
-moz-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
-ms-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
-o-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
-webkit-transform-origin:0;
-moz-transform-origin:0;
-ms-transform-origin:0;
-o-transform-origin:0;
transform-origin:0;
}
If the above code snippet isn't causing the issue, it might be related to the JavaScript implementation, which is included in the attached jsFiddle. Any guidance or assistance would be greatly appreciated!