Анимация выпадающего меню с помощью vueJS

Question

Я создал навигацию при наведении курсора мыши и отпускании мыши, которая вызывает логическое отображение моего раскрывающегося списка.

Я хочу, чтобы мой список вызывал другую анимацию для окружающего блока, но я не могу вызвать другие переходы.

Мой переход работает только в том случае, если я добавлю v-if в список, и когда я добавлю его в div, он не будет работать.

Я смоделировал пример в jsfiddle

<div id="app">

 <div class="nav">
  <div @mouseover="showProducts = true" @mouseleave="showProducts = 
  false"  class="nav__list">home</div>
   <div class="nav__list">about</div>
    <div class="nav__list">pics</div>

<div class="nav__dropdown">

    <transition-group
      name="ballmove"
      enter-active-class="bouncein"
      tag="ul"
    >
      <li v-if="showProducts"  v-for="(menu, index) in todos" :key="index">{{menu.text}}</li>
    </transition-group>
</div>

https://jsfiddle.net/ronoc4/eywraw8t/339253/

Answer 1

Я обнаружил, что добавление фейдера в группу, а затем добавление класса перехода в li дает то, что я искал.Я действительно хотел, чтобы каждый элемент в списке загружал анимацию bouncein, поэтому, когда вы наводите курсор мыши на кнопку, элементы в списке будут загружаться по отдельности, но я предполагаю, что то, что я сделал, сейчас будет работать.

 <transition name="fade" mode="out-in" >
   <ul v-if="showProducts">
     <li class="bouncein" v-for="(menu, index) in todos" ...>
   </ul>
 </transition>

Answer 2

<transition-group> для анимации (или перехода) отдельных элементов в группе (строки в таблице, элементы в списке).

Если вы хотите анимировать (или преобразовать) всю группу в целом, что, как мне кажется, то, о чем вы просите, используйте <transition> вместо.

<transition name="ballmove" ...>
    <ul v-if="showProducts">
        <li v-for="(menu, index) in todos" ...>
    </ul>
<transition>