带有motion-ui的Foundation 6顶栏动画答案

【问题标题】：Foundation 6 topbar animation with motion-ui带有motion-ui的Foundation 6顶栏动画
【发布时间】：2016-01-28 16:14:59
【问题描述】：

使用 Foundation 6，我尝试获得一个响应式顶栏，其中包含切换动画（小屏幕）。

我有这个：

<div class="top-bar">
        <div class="top-bar-title">
               <strong>MyTitle</strong>
            <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
                <span class="menu-icon" data-toggle></span>
            </span>
        </div>
        <div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
            <div class="top-bar-right">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>
    </div>

但是即使在导入motion-ui库之后，也不会发生过渡。
只是一个粗略的display:none 到display:block 的菜单，反之亦然。

当我将data-responsive-toggle 替换为data-toggle 时它可以工作，但我会失去响应能力。

这是关于 Foundation 6 的错误吗？

【问题讨论】：

标签： javascript html css css-animations zurb-foundation-6

【解决方案1】：

我遇到了同样的问题。通过将 data-toggle 和 data-responsive-toggle 添加到第一个 div 来解决它：

<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
  <button class="menu-icon" type="button" ></button>
  <div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
  <div class="top-bar-left">
    <ul class="menu">
      <li>Left Item 1</li>
      <li>Left Item 2</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li>Right Item 1</li>
      <li>Right Item 2</li>
    </ul>
  </div>
</nav>

【讨论】：