基于条件类更改的 CSS 转换在使用 vuejs 和 tailwind 时不起作用-PHP中文网问答

<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>