La transformation CSS basée sur des changements de classe conditionnels ne fonctionne pas lors de l'utilisation de vuejs et tailwind

Question

我正在尝试使用 vent arrière transition 类来展开侧边栏 Vuejs 内的 子菜单 组件。

// modèle

<div
    :class="`${index === 0 ? 'mt-2' : ''} lien-barre latérale lien-dropdown-barre latérale`"
    @click="link.open = !link.open"
>
    <div class="flex items-center">
        <FontAwesomeIcône
            :icon="link.icon"
            class="sidebar-link-icon"
        />
        {{ lien.étiquette }}
    </div>
    <FontAwesomeIcône
        :icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']"
        class="sidebar-dropdown-link-icon"
    />
</div>

// C'est la ligne drôle...
<div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} menu déroulant de la barre latérale`">
    <lien-routeur
        v-for="(sous-lien, index) dans link.sublinks"
        :key="index" class="sidebar-link mt-1"
        :to="sublink.route"
    >
        <FontAwesomeIcône
            :icon="sublink.icon"
            class="sidebar-link-icon pl-3"
        />
        {{ sublink.label }}
    </lien-routeur>
</div></pré>
<p>Le comportement attendu est que lorsque <code>link.open</code> devient <code>true</code>, le <code> ;</code>tag/strong> se développe (ou s'affiche) avec une transition de 300 millisecondes, sa valeur <code>height</code> a été ajustée en fonction de <code>link.sublinks.length</code> Les définitions de valeurs, qui appliquent toutes la classe CSS <code> Ce que je veux dire, c'est : </p>
<pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] durée-[300ms] }

Si link.sublinks.length est égal à 3, la classe personnalisée appliquée sera h-[135px] ; et la balise

dans drôle de ligne apparaît, mais bien que la classe p-0 la conversion ne fonctionne pas. Google Chrome Dev Tools me montre height: 135px comme règle CSS désactivée.

Enfin, si je remplace h-[${link.sublinks.length * 45}px] par une valeur constante (par exemple h-[200px]< /code>), tout fonctionne comme prévu.

Je soupçonne que h-auto remplace ma classe personnalisée de hauteur.

Je suis latin, donc mon anglais n'est pas très bon.

Merci d'avance.

Answer 1

Je l'ai fait fonctionner, mais je n'aime pas la solution que j'ai trouvée :

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

Évitez simplement d'utiliser la classe Tailwind pour définir l'attribut height, c'est tout pour l'instant.