On state change, do animation

Question

Currently I'm working in Vue.js and have a navigation menu that I'd like to animate. What I'm looking to do is show two li elements when a user hovers over one of the navigational buttons. Currently what I'm doing is setting a data type of showActivities to false by default and setting that to true on mouseenter and false on mouseleave. So this has the items appearing and disappearing on hover but they're not animated. How could animation for this be done?

<ul class="navs">
      <li>Schedule</li>
      <li @mouseenter="showActivities = true" @mouseleave="showActivities = false">Team Activity</li>
      <li v-show="showActivities">tik tak tow</li>
      <li v-show="showActivities">Bejewel</li>
      <li>Resources</li>
      <li class="logout"><a href="https://google.com" target="_blank">Logout</a></li>
    </ul>

<script>
export default {
  name: 'SideMenu',
  data() {
    return {
      showActivities: false,
    };
  },
};
</script>

I would recommend using nested lists for showing/hiding of submenus, its easier to animate and in general work with it (not use v-show on two lis, but just on one ul), as example there is [bootstrap](https://getbootstrap.com/docs/5.0/components/navs-tabs/) to check. To your problem, first add class when showActivities is true and add animation to this class, and thats it. Instead of using v-show, just use css property display/opacity or wathever to hide submenu after animation ends. Other thing is your animation, which is not specified. Because for diff anims you should do diff patterns. — Filip Kováč, May 08 '21 at 19:13

score 2 · Accepted Answer · edited Jul 15 '22 at 23:39

okay if i got you correct you want a type of animation like a slow fade In and Out. In vuejs transitions, state are attached to CSS classes that can be called and modified ass you want it to be. The doc is clearer about it Vuejs Transitions

for example if you add this in your css section the transition will be a slow fade In and Out:

    .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

On state change, do animation

1 Answers1