基於條件類別變更的 CSS 轉換在使用 vuejs 和 tailwind 時不起作用
<p>我正在嘗試使用<strong>tailwind</strong> <code>transition</code> 類別來展開側邊欄<strong>Vuejs 內的<code><router-link>strong>Vuejs 內的<code><router-link>>>>> ;/code> 子選單</strong> 元件。 </p>
<pre class="brush:php;toolbar:false;">// 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></pre>
<p>預期的行為是，當<code>link.open</code>變成<code>true</code>時，<strong>有趣的行<定義的<code> <div></code>標籤/strong> 以300 毫秒的過渡展開（或顯示），其<code>height</code> 值已根據<code>link.sublinks.length</code> 值已根據<code>link.sublinks.length</code>值定義，所有這些都應用<code> sidebar-dropdown-menu</code> CSS 類別。我的意思是：</p>
<pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] }</pre>
<p>如果<code>link.sublinks.length</code> 如果<code>3</code>，則套用的自訂類別將為<code>h-[135px]</code> ; 並且<code> <strong>funny line</strong> 中的<div></code> 標記出現，但是儘管<code>p-0</code> 類別按預期工作，但轉換不起作用。 Google Chrome 開發工具向我顯示 <code>height: 135px</code> 作為禁用的 CSS 規則。 </p>
<p>最後，如果我將<code>h-[${link.sublinks.length * 45}px]</code> 替換為常數值（例如<code>h-[200px]< /code>）一切都如預期進行。 </p>
<p>我懷疑 <code>h-auto</code> 正在覆蓋我的身高自訂類別。 </p>
<p>我是拉丁人，所以我的英文不太好看。 </p>
<p>提前致謝。 </p>
