使用tailwindcss和vuejs添加到动态隐藏属性的过渡

Question

我正在使用 tailwind css 和 nuxt 创建 UI 布局。
其中 侧边栏始终在 md

 断点 

处可见，并且
在移动设备上隐藏，仅在单击菜单按钮时才可见。

这工作正常，因为当单击按钮时会显示侧边栏，因为我正在设置和删除

hidden

 类 

但是我想在显示时添加过渡

以下是当前代码

<template>

   <!-- backdrop -->
   <div v-if="sidebarOpen" class="fixed md:hidden bg-black w-full min-h-dvh opacity-20" @click="hideSideBar()">
   </div>


   <div 
      :class="{ hidden: !sidebarOpen}" //<--- here i am setting this
      class="w-64 group md:block fixed  transition-all h-dvh shadow-md shadow-gray-400 shadow-x-1 mr-1 flex-none md:w-14 md:hover:w-64 overflow-hidden">
      <div class=" p-2 flex bg-violet-500 ">
         <Icon name="🚀" size="38" />
      </div>
      <div class="overflow-y-auto h-full">
         <div class="h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800 pb-12">
            <ul class="space-y-2 font-medium">
               <li>
                  <a href="#"
                     class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                     <div>
                        <Icon name="mdi:view-grid-plus-outline" class="text-red-600" size="1.2rem" />
                     </div>
                     <span class="flex-1 md:hidden group-hover:block ms-3 whitespace-nowrap">Kanban</span>
                     <span
                        class="inline-flex md:hidden group-hover:block items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
                     <span
                        class="inline-flex items-center justify-center ms-3 text-sm font-medium md:hidden group-hover:block">
                        <Icon name="formkit:down" class="text-red-600" size="1.2rem" />
                     </span>
                  </a>
               </li>
               <li>
                  <a href="#"
                     class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                     <div>
                        <Icon name="mdi:view-grid-plus-outline" class="text-red-600" size="1.2rem" />
                     </div>
                     <span class="flex-1  md:hidden group-hover:block ms-3 whitespace-nowrap">Kanban</span>
                     <span
                        class="inline-flex md:hidden group-hover:block items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
                  </a>
               </li>
            </ul>
         </div>
      </div>

   </div>


</template>

<script setup>

const sidebarOpen = useState('sidebarOpen')

function hideSideBar() {
   sidebarOpen.value = false;
}

</script>

尝试使用

https://vuejs.org/guide/built-ins/transition
transition

 与 

:key

 不起作用。

演示：

https://stackblitz.com/edit/nuxt-starter-evxfmn?file=app.vue

Answer 1

提醒显示：没有人无法创建过渡，因此使用 vue Transaction 组件和 v-if 而不是 class="hide"。

https://stackblitz.com