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

<transition-group>用于动画化（或转换）组中的单个元素（表中的行，列表中的项）。

如果您想对整个组进行动画处理（或过渡），我认为这是您所要的，请改用<transition>。

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

Answer 2

我发现在组中添加淡入淡出，然后在li中添加过渡类得到了我想要的东西。我真的很想让列表中的每个项目都加载动画bouncein，所以当您将鼠标悬停在按钮上时，列表中的项目将单独加载，但是我想我现在所做的事情现在必须起作用。

where

使用vueJS动画下拉列表

2 个答案: