On state change, do animation

Issue

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>

Solution

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

Answered By - Edouard Yonga