Transformasi CSS berdasarkan perubahan kelas bersyarat tidak berfungsi apabila menggunakan vuejs dan tailwind-Soal Jawab Rangkaian PHP Cina
Transformasi CSS berdasarkan perubahan kelas bersyarat tidak berfungsi apabila menggunakan vuejs dan tailwind
P粉872182023
P粉872182023 2023-08-30 10:21:09
0
1
393

我正在尝试使用 tailwind peralihan 类来展开侧边栏 Vuejs 内的 子菜单 组件。

// templat 
{{ link.label }}
// Ini baris lucu...
{{ sublink.label }}

Tingkah laku yang dijangkakan ialah apabila link.open menjadi true, ditakrifkan dalam baris yang menarik< ;tag/strong> mengembang (atau memaparkan) dengan peralihan 300 milisaat, nilai tingginya telah dilaraskan berdasarkan link.sublinks.length Takrifan nilai, yang kesemuanya menggunakan kelas Apa yang saya maksudkan ialah:

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

Jika link.sublinks.length sama dengan 3, kelas tersuai yang digunakan ialah h-[135px] ; dan teg

dalam baris lucu penukaran tidak berfungsi. Alat Pembangun Google Chrome menunjukkan kepada saya tinggi: 135px

Akhir sekali, jika saya menggantikan h-[${link.sublinks.length * 45}px] dengan nilai tetap (cth. h-[200px]< /code>) semuanya berfungsi seperti yang diharapkan.

Saya mengesyaki h-auto mengatasi kelas tersuai ketinggian saya.

Saya orang Latin, jadi bahasa Inggeris saya tidak begitu baik.

Terima kasih terlebih dahulu.

P粉872182023
P粉872182023

membalas semua (1)
P粉211273535

Saya telah berjaya, tetapi saya tidak suka penyelesaian yang saya temui:

Elakkan sahaja menggunakan kelasTailwinduntuk menentukan atribut ketinggian, itu sahaja buat masa ini.

    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!