css - 使用 vueJS 制作下拉菜单动画

Question

我创建了一个带有鼠标悬停和鼠标离开的导航，它会触发 bool 值来显示我的下拉菜单。

我希望我的列表对周围的框触发不同的动画，但我似乎无法触发不同的过渡。

只有当我将 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

<transition-group>用于动画(或过渡)组中的单个元素(表格中的行，列表中的元素)。

如果您想对整个组进行动画处理(或过渡)，我想这就是您要问的，请使用 <transition>相反。

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