基於條件類別變更的 CSS 轉換在使用 vuejs 和 tailwind 時不起作用

Question

我正在嘗試使用tailwind transition 類別來展開側邊欄Vuejs 內的strong>Vuejs 內的>>>> ;/code> 子選單 元件。

// 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 值已根據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]< /code>）一切都如預期進行。

我懷疑 h-auto 正在覆蓋我的身高自訂類別。

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

提前致謝。

Answer 1

我已經實現了它的工作，但我不喜歡我找到的解決方案：

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

只是避免使用 Tailwind 類別來定義高度屬性，現在就是這樣。