[Vuejs]-Animating a dropdown with vueJS

<transition-group> is for animating (or transitioning) individual elements within a group (rows in a table, items in a list).

If you want to animate (or transition) the entire group as a whole, which I think is what you’re asking, use <transition> instead.

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

I found adding a fade to the group then adding a transition class to the li got something that I was looking for. I was really wanted to have each item in the list load animation bouncein, so when you hover over a button the items in the list would load individually, but I guess what I’ve done will have to work for now.

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