Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons.
At the moment, I have set the data type showActivities to false by default and changed it to true on mouseenter, then back to false on mouseleave. This method makes the items appear and disappear upon hover, but they lack animation. How can animation be implemented for this?
<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>