使用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

qazxsw poi用于动画（或转换）组中的单个元素（表中的行，列表中的项）。

如果你想整个组（或转换）整个组，我认为这就是你要问的，请改用<transition-group>。

<transition>

Answer 2

我发现添加了淡入淡出组，然后向li添加了一个过渡类，得到了我正在寻找的东西。我真的很想让列表中的每个项目加载动画弹跳，所以当你将鼠标悬停在一个按钮上时，列表中的项目会单独加载，但我想我所做的事情现在必须工作。

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