基于条件类更改的 CSS 转换在使用 vuejs 和 tailwind 时不起作用
<p>我正在尝试使用 <strong>tailwind</strong> <code>transition</code> 类来展开侧边栏 <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> 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>
