基于条件类更改的 CSS 转换在使用 vuejs 和 tailwind 时不起作用

Question

我正在尝试使用 tailwind transition 类来展开侧边栏 Vuejs 内的 子菜单 组件。

// 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时，有趣的行<中定义的

标签/strong> 以 300 毫秒的过渡展开（或显示），其 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 正在覆盖我的身高自定义类。

我是拉丁人，所以我的英语不太好看。

提前致谢。

Answer 1

我已经实现了它的工作，但我不喜欢我找到的解决方案：

<div
    :style="`${link.open ? `height: ${link.sublinks.length * 45}px` : 'height: 0px'}`"
    class="sidebar-dropdown-menu"
>

只是避免使用 Tailwind 类来定义高度属性，现在就是这样。