vuejs と tailwind を使用すると、条件付きクラス変更に基づく CSS 変換が機能しない-PHP中国語ネットワークQ&A
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
vuejs と tailwind を使用すると、条件付きクラス変更に基づく CSS 変換が機能しない
P粉872182023
P粉872182023 2023-08-30 10:21:09
0
1
404

tailwind transition クラスを使用してサイドバーを展開しようとしています< ;/ code> サブメニュー コンポーネント。 

// テンプレート
      

       
  {{ リンク.ラベル }} 
  
 // これは面白い行です... 

       <ルーターリンク v-for="「(サブリンク," インデックス) in link.sublinks」 :key="index" class="サイドバーリンク mt-1" :to="サブリンク.ルート">
         {{ サブリンク.ラベル }}

期待される動作は、link.open が true になると、興味深い行<

で定義された ;tag/strong> は 300 ミリ秒の遷移で展開 (または表示) され、その height の値は link.sublinks.length に基づいて調整されています。値の定義。すべて sidebar-dropdown-menu CSS クラスを適用します。私が言いたいのは: 

.sidebar-dropdown-menu { @apply w-full overflow-hiddentransition-[height] period-[300ms] }

link.sublinks.length が 3 に等しい場合、適用されるカスタム クラスは h-[135px] と 面白い行 の

タグが表示されますが、p-0 クラスは期待どおりに動作しますが、変換は機能しません。 Google Chrome Dev Tools では、height: 135px が無効な CSS ルールとして表示されます。

最後に、h-[${link.sublinks.length * 45}px] を定数値に置き換えるとします (例: h-[200px]< /code>) すべてが期待どおりに機能します。

h-auto が高さのカスタム クラスをオーバーライドしているのではないかと思われます。

私はラテン系なので、英語はあまり上手ではありません。

よろしくお願いします。

P粉872182023
P粉872182023

全員に返信 (1)
P粉211273535
P粉2112735352023-08-31 00:35:38 1棟

うまくいきましたが、見つけた解決策が気に入りません:

リーリー

Tailwindクラスを使用して高さ属性を定義することは避けてください。今のところはこれだけです。

いいねを押す+0
返信を追加
    人気のトピック
    詳細>
    人気の記事
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！