Vue点击下拉隐藏的动画效果

QQ录屏20220612184037

​​​​​​​

<button @click="donghua = !donghua">点击下拉隐藏显示</button>
 <transition>
      <div :class="donghua==true?'come':'to'" v-show="donghua">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
        <li>菜单6</li>
        <li>菜单7</li>
        <li>菜单8</li>
        <li>菜单9</li>
        <li>菜单10</li>
      </div>
    </transition>

 data() {
    return {
      donghua: false,
    };
  },