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

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