CSS-Transformation basierend auf bedingten Klassenänderungen funktioniert nicht, wenn VueJS und Rückenwind verwendet werden
<p>我正在尝试使用 <strong>Rückenwind</strong> <code>transition</code> 类来展开侧边栏 <strong>Vuejs 内的 <code><router-link></code> 子菜单</strong> 组件.</p>
<pre class="brush:php;toolbar:false;">// Vorlage
<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>
// Das ist die lustige Zeile...
<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>Das erwartete Verhalten ist, dass, wenn <code>link.open</code> zu <code>true</code> wird, der in der <strong>interessanten Zeile<div> ;</code>tag/strong> wird mit einem 300-Millisekunden-Übergang erweitert, sein <code>height</code>-Wert wurde basierend auf <code>link.sublinks.length</code> angepasst. Wertdefinitionen, die alle die CSS-Klasse <code> anwenden. Was ich meine ist: </p>
<pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hidden transit-[height] duration-[300ms] }</pre>
<p>Wenn <code>link.sublinks.length</code> gleich <code>3</code> ist, wird die benutzerdefinierte Klasse <code>h-[135px]</ angewendet. code> und das <div></code>-Tag in der <code>funny-Zeile</strong> Die Konvertierung funktioniert nicht. Google Chrome Dev Tools zeigt mir <code>height: 135px</code> als deaktivierte CSS-Regel. </p>
<p>Wenn ich schließlich <code>h-[${link.sublinks.length * 45}px]</code> durch einen konstanten Wert ersetze (z. B. <code>h-[200px]< /code>) funktioniert alles wie erwartet. </p>
<p>Ich vermute, dass <code>h-auto</code> meine benutzerdefinierte Höhenklasse überschreibt. </p>
<p>Ich bin Latein, daher ist mein Englisch nicht sehr gut. </p>
<p>Vielen Dank im Voraus. </p>
