Question

我在弄清楚我的移动导航时遇到了一些麻烦。我有一个在左边，一个在右边，他们应该滑出去。左边的一个工作正常，但右边的一个刚刚打开，没有过渡。

过去4个小时我一直盯着CSS，搞乱了一些过渡。我不确定为什么它没有顺利出现，但其他一切都有效。

这是一个带有一些代码的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中有一些样式并调整了mobile-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。任何帮助将不胜感激！

Answer 1

我花了一段时间，但我发现了。对于任何可能在将来遇到同样问题的人，我不得不将我的JavaScript分成两部分（main-L.js和main-R.js），一部分用于Left，一部分用于Right菜单。我还必须为要使用的新JavaScript文件添加另一个换行。基本上我只是在js和CSS中应用于我的右侧菜单的类的末尾添加了一个R.

<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的一点，我无法识别控制平滑动画。这是＃inner-wrap需要样式，而我试图将转换放在菜单上。

     .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);
      }

移动导航菜单左右两侧

1 个答案: