我正在尝试使用 tailwind transition 类来展开侧边栏 Vuejs 内的
1
858// template
<div
:class="`${index === 0 ? 'mt-2' : ''} sidebar-link sidebar-dropdown-link`"
@click="link.open = !link.open"
>
<div class="flex items-center">
<FontAwesomeIcon
:icon="link.icon"
class="sidebar-link-icon"
/>
{{ link.label }}
</div>
<FontAwesomeIcon
:icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']"
class="sidebar-dropdown-link-icon"
/>
</div>
// This is the funny line...
<div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} sidebar-dropdown-menu`">
<router-link
v-for="(sublink, index) in link.sublinks"
:key="index" class="sidebar-link mt-1"
:to="sublink.route"
>
<FontAwesomeIcon
:icon="sublink.icon"
class="sidebar-link-icon pl-3"
/>
{{ sublink.label }}
</router-link>
</div>
预期的行为是，当 如果 最后，如果我将 我怀疑 我是拉丁人，所以我的英语不太好看。 提前致谢。link.open变为true时，有趣的行<中定义的height 值已根据 link.sublinks.length 值定义，所有这些都应用 sidebar-dropdown-menu CSS 类。我的意思是：
.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] }
link.sublinks.length 等于 3，则应用的自定义类将为 h-[135px] 并且 funny line 中的 p-0 类按预期工作，但转换不起作用。 Google Chrome 开发工具向我显示 height: 135px 作为禁用的 CSS 规则。
h-[${link.sublinks.length * 45}px] 替换为常量值（例如 h-[200px]）一切都按预期进行。h-auto 正在覆盖我的身高自定义类。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我已经实现了它的工作，但我不喜欢我找到的解决方案：
<div :style="`${link.open ? `height: ${link.sublinks.length * 45}px` : 'height: 0px'}`" class="sidebar-dropdown-menu" >只是避免使用 Tailwind 类来定义高度属性，现在就是这样。