Основа 6 анимация верхнего бара с motion-ui

Question

Используя 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> 

Но даже после импорта библиотеки движения-щ, никакого перехода не происходит.
Просто грубо display:none до display:block меню и наоборот.

Это работает, когда я заменяю data-responsive-toggle на data-toggle, но я бы потерял отзывчивость.

Это ошибка в отношении Фонда 6?

Answer 1

У меня была та же проблема. Решил его, добавив оба переключателя данных и данных к переключателю в первый 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>