vue通過點選或懸停實作slideToggole效果

<template>
  <div id="app">
    <div class="slide-toggole">
      <button @click="show = !show">slideToggle效果</button>
      <transition name="ul">
        <ul v-if="show" class="ul-box">
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
        </ul>
      </transition>
    </div>

    <div class="hover">
      <button @mouseenter="mouseenter" @mouseleave="mouseleave">hover效果</button>
      <transition name="ul">
        <ul v-if="hoverShow" class="ul-box">
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
          <li>11111111111111</li>
        </ul>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      show: false,
      hoverShow: false
    };
  },
  methods: {
    mouseenter() {
      this.hoverShow = true;
    },
    mouseleave() {
      this.hoverShow = false;
    }
  }
};
</script>

<style>
ul,
li {
  list-style: none;
}
.slide-toggole,
.hover {
  margin-bottom: 350px;
}
.ul-box {
  height: 200px;
  overflow: hidden;
}
.ul-enter-active,
.ul-leave-active {
  transition: all 0.5s;
}
.ul-enter,
.ul-leave-to {
  height: 0;
}
</style>