У меня возникли проблемы с поиском моего мобильного навигатора. У меня есть один слева и один справа, и они должны выскакивать. Левый работает нормально, но правый открывается, нет перехода.
Я смотрел на CSS последние 4 часа, возился с некоторыми переходами. Я не уверен, почему он не выплывает гладко, но все остальное работает.
Здесь jsFiddle с некоторым кодом: http://jsfiddle.net/Etn6q/
Я начал использовать этот учебник: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
<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>
И у меня есть некоторые стили в style.css и настроен для мобильного-flyout-menu.css. То, что у меня есть все мои переходы:
.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;
}
Я не уверен, что это код проблемы. Это может быть javascript, я приложил это к моему jsFiddle. Любая помощь будет оценена!
Мне потребовалось некоторое время, но я понял это. Для всех, кто мог бы наткнуться на этот вопрос с тем же вопросом в будущем, мне пришлось разбить свой JavaScript на два (main-L.js и main-R.js), один для Left и один для меню Right. Мне также пришлось добавить еще одну оболочку для использования нового файла JavaScript. В основном я просто добавил R в конце классов, которые применимы к моему правому меню в js и CSS.
<div id="outer-wrap">
<div id="inner-wrap">
<div id="inner-wrapR"><!--added wrap here-->
<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>
Это небольшая часть CSS, с которой я столкнулся с проблемой идентификации, которая контролировала гладкую анимацию. Это было # внутреннее обертывание, которое требовало стилизации, в то время как я пытался преобразовать в меню.
.csstransforms3d.csstransitions.js-navR #inner-wrap {
-webkit-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
}