An exciting tutorial on creating a animated dropdown using vueJS

Question

An exciting tutorial on creating a animated dropdown using vueJS

I've set up a navigation menu with mouseover and mouse leave events to toggle a dropdown by changing a boolean value.

Now, I'm trying to apply different animations to the list items in the dropdown compared to the surrounding box, but I'm facing difficulty triggering unique transitions for each.

The transition effects only seem to work when I use v-if on individual list items rather than on the entire div element.

I've provided an example on 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/

css vue.js transition

Answer 1

Answer №1

<transition-group> is specifically designed for animating individual elements within a group, such as rows in a table or items in a list.

If your intention is to animate the entire group as a whole, then you should consider using <transition> instead.

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

Answer 2

<transition-group> is specifically designed for animating individual elements within a group, such as rows in a table or items in a list.

If your intention is to animate the entire group as a whole, then you should consider using <transition> instead.

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

Answer 3

Answer №2

After experimenting, I discovered that applying a fade effect to the group and then adding a transition class to the list items gave me the desired outcome. Initially, I wanted each item in the list to have a bounce-in animation when hovering over a button, loading individually. However, the current solution will have to suffice for now.

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

Answer 4

After experimenting, I discovered that applying a fade effect to the group and then adding a transition class to the list items gave me the desired outcome. Initially, I wanted each item in the list to have a bounce-in animation when hovering over a button, loading individually. However, the current solution will have to suffice for now.

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

An exciting tutorial on creating a animated dropdown using vueJS

Answer №1

Answer №2

Similar questions

Specify padding or margin for all sides in a single line of XML code

Creating multiple synchronous loops within a Vue component using JavaScript

Experience choppy scrolling in Internet Explorer

Gradually bringing a tag into view, gently fading it away, and then altering the text before beginning the cycle anew

Vuex State: Array is devoid of any elements

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

Incorporate a dynamic avatar into your Navbar with the help of Bootstrap-Vue

css: text not enclosed by a span tag

What is the best way to display a child component inside an iframe using Vue.js?

A guide to injecting HTML banner code with pure Vanilla Javascript

Tips on emphasizing all div elements and incorporating navigation to each of them

The problem of duplicate ids: Once an id is used, it cannot be

Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Using Vee-validate and vuetify to create a dynamic checkbox group with v-for loop

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

Attempting to make initials fade and slide out upon mouseover using jQuery

Tips for altering the label color of an md-input-container after text has been entered

Ways to make video controls visible following the initial click on the video

The top navbar does not stay fixed when the page is scrolled

Scrollable navigation bar at the bottom styled with Bootstrap