CSS-Transformation basierend auf bedingten Klassenänderungen funktioniert nicht, wenn VueJS und Rückenwind verwendet werden

Question

我正在尝试使用 Rückenwind transition 类来展开侧边栏 Vuejs 内的 子菜单 组件.

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

Das erwartete Verhalten ist, dass, wenn link.open zu true wird, der in der interessanten Zeile

;tag/strong> wird mit einem 300-Millisekunden-Übergang erweitert, sein height-Wert wurde basierend auf link.sublinks.length angepasst. Wertdefinitionen, die alle die CSS-Klasse anwenden. Was ich meine ist:

.sidebar-dropdown-menu { @apply w-full overflow-hidden transit-[height] duration-[300ms] }

Wenn link.sublinks.length gleich 3 ist, wird die benutzerdefinierte Klasse h-[135px] und das

-Tag in der funny-Zeile Die Konvertierung funktioniert nicht. Google Chrome Dev Tools zeigt mir height: 135px als deaktivierte CSS-Regel.

Wenn ich schließlich h-[${link.sublinks.length * 45}px] durch einen konstanten Wert ersetze (z. B. h-[200px]< /code>) funktioniert alles wie erwartet.

Ich vermute, dass h-auto meine benutzerdefinierte Höhenklasse überschreibt.

Ich bin Latein, daher ist mein Englisch nicht sehr gut.

Vielen Dank im Voraus.

Answer 1

我已经实现了它的工作，但我不喜欢我找到的解决方案：

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

只是避免使用 Tailwind 类来定义高度属性，现在就是这样。