如何在 vuejs 中使用 animation 顯示/隱藏子菜單

Question

我是 vuejs 的新手，我想創建一個具有以下 html 結構的菜單。

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

子菜單被 css 隱藏。

我希望當我單擊第item 1鏈接時，子ul元素將通過向下滑動 animation 進行切換。 這也將發生在第 2 項和其他項上。

Answer 1

我為第一個子菜單寫了一個演示。 我使用 animation 的過渡組件。 也可以訪問https://codesandbox.io/s/poliished-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>