使用 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 添加过渡类得到了我正在寻找的东西。我真的很想让列表中的每个项目加载动画弹跳，所以当你将鼠标悬停在一个按钮上时，列表中的项目会单独加载，但我想我现在所做的必须工作。

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