Vue トランジションのトランジション遅延を削除するにはどうすればよいですか?

Question

Vue を使用して、マウスを画像上に置くと上に移動してフェードインするテキスト ボックスをアニメーション化しています。アニメーションは正しいですが、開始するまでにわずかな遅延があります。画像をホバーするとテキスト ボックスがスムーズにフェードインし、上に移動し始めるようにしたいと考えています。テキスト ボックスは適切にフェードアウトし、カーソルが離れると下に移動します。

テンプレート: `
            <div>
                <div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' i">
                    <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="バッジ[アイテム].imageSrc" :alt="バッジ[アイテム].alt"/>
                    ＜トランジション＞
                        <p v-show="hoveredIndex === i">{{ バッジ[アイテム].説明 }}</p>
                    </トランジション>
                </div>
            </div>
        `、
        メソッド:{
            hoverStart(i){
                this.hoveredIndex = i;
            }、
            hoverEnd(){
                this.hoveredIndex = null;
            }
        },

.attribute-icons {
                    マージントップ: 5px;
                    位置:相対;
                    遷移遅延: 0s;

                    画像 {
                        幅: 28px;
                        高さ: 28px;
                        マージン右: 8px;
                        トランジション: 0.24秒。
                        遷移遅延: 0s;
                        
                    }

                    p {
                        位置: 絶対;
                        上: 20ピクセル;
                        幅:19vw;
                        最大幅:350ピクセル;
                        最小幅:175ピクセル;
                        背景: #0088ce;
                        色: #ffffff;
                        z インデックス: 1;
                        境界半径: 5px;
                        パディング: 5px 10px;
                        ボックスシャドウ: 0 0 18px rgba(2, 2, 2, 0.14);
                        ポインターイベント: なし。
                        フォントの太さ: 500;
                        フォントサイズ: 13px;
                        トランジション: 0.24 秒の容易さ。
                        遷移遅延: 0s;
                        @media(最大幅:1100px){
                            幅:25vw;
                        }
                        @media(最大幅:991px){
                            幅:36vw;
                        }

                    }

                    .v-enter-from{
                        不透明度: 0;
                        変換:translateY(10px);
                        トランジション: 不透明度 0.24 秒の容易さ、変換 0.24 秒の容易さ。
                        遷移遅延: 0s;
                    };
                    .v-enter-active{
                        遷移遅延: 0s;
                        トランジション: 不透明度 0.24 秒の容易さ、変換 0.24 秒の容易さ。
                        変換:translateY(4px);
                    };
                    .v-enter-to{

                    };

                    .v-leave-from{
                        変換:translateY(10px);
                    };
                    .v-leave-active{
                        トランジション: 不透明度 0.24 秒の容易さ、変換 0.24 秒の容易さ。
                        変換:translateY(10px);
                    };
                    .v-leave-to{
                        不透明度:0;
                    };

私たちはすべての元素に遷移遅延: 0 を追加しましたが、機能しませんでした。

Answer 1

Vue.js では、transition コンポーネントを使用すると、要素が DOM に挿入、更新、または削除されるときにトランジション効果を追加できます。デフォルトでは、Vue は要素が挿入または削除されるときにトランジション遅延を適用します。これにより、ユーザーはよりスムーズなトランジション効果を得ることができます。ただし、トランジションの遅延を解消して、要素をすぐに表示または非表示にしたい場合は、Appearl プロパティを CSS トランジション プロパティとともに使用できます。

これを実現する方法の例を次に示します:

1. Vue コンポーネントのテンプレートで、characteristic 属性を持つ transition コンポーネントを使用します。 リーリー

コンポーネント スタイル セクションまたはグローバル CSS に必要なトランジション効果 CSS を追加します:

2. リーリー
この例では、

fade

クラスがトランジション名として使用されていますが、任意のクラス名に置き換えることができます。 transition プロパティを opacity 0.0s に設定すると、実際にはトランジションの遅延が削除されます。 遷移の遅延を取り除くと視覚的な変化が即座に得られる可能性がありますが、ユーザー エクスペリエンスがより唐突になる可能性があることに注意してください。トランジションは、よりスムーズで視覚的に魅力的なインターフェイスを提供するためによく使用されます。

Vue の動作は時間の経過とともに変化する可能性があるので、最も正確で最新の情報については、使用しているバージョンの Vue 公式ドキュメントを必ず参照してください。