如何在 vuejs 中使用 animation 显示/隐藏子菜单

Question

I'm new to vuejs and I want to create a menu with below html structure.

<ul>
    <li><a href="" v-on:click="toggleMenu">item 1</a>
                    <ul class="list-unstyled">
                         <li><a href="">submenu 1-1</a></li>
                         <li><a href="">submenu 2-1</a></li>
                         <li><a href="">submenu 3-1</a></li>
                    </ul>
    </li>
    <li><a href="" v-on:click="toggleMenu">item 2</a>
                    <ul class="list-unstyled">
                         <li><a href="">submenu 1-2</a></li>
                         <li><a href="">submenu 2-2</a></li>
                    </ul>
     </li>
</ul>

submenu's are hidden with css.

I want when I click on item 1 link, the child ul element will be toggled with slide down animation. And also this will happens for item 2 and others.

Answer 1

I wrote a demo for the first submenu. I use the transition component for the animation. you can also visit https://codesandbox.io/s/polished-butterfly-z1zf8?file=/src/App.vue:0-1263

<template>
  <div id="app">
    <ul>
      <li>
        <a href="javascript:;" v-on:click="item1Visible = !item1Visible">item 1</a>
        <transition name="slideDown">
          <ul class="list-unstyled" v-show="item1Visible">
            <li>
              <a href>submenu 1-1</a>
            </li>
            <li>
              <a href>submenu 2-1</a>
            </li>
            <li>
              <a href>submenu 3-1</a>
            </li>
          </ul>
        </transition>
      </li>
      <li>
        <a href="javascript:;" v-on:click="item2Visible = !item2Visible">item 2</a>
        <ul class="list-unstyled" v-show="item2Visible">
          <li>
            <a href>submenu 1-2</a>
          </li>
          <li>
            <a href>submenu 2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      item1Visible: true,
      item2Visible: true
    };
  }
};
</script>

<style>
.slideDown-enter-active,
.slideDown-leave-active {
  transition: all 0.5s ease-out;
  overflow: hidden;
}
.slideDown-enter, .slideDown-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
.slideDown-enter-to,
.slideDown-leave {
  height: 50px;
}
</style>