Vue トランジションのトランジション遅延を削除するにはどうすればよいですか?
<p>Vue を使用して、マウスを画像上に置くと上に移動してフェードインするテキスト ボックスをアニメーション化しています。アニメーションは正しいですが、開始するまでにわずかな遅延があります。画像をホバーするとテキスト ボックスがスムーズにフェードインし、上に移動し始めるようにしたいと考えています。テキスト ボックスは適切にフェードアウトし、カーソルが離れると下に移動します。 </p>
<pre class="brush:php;toolbar:false;">テンプレート: `
<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;
}
},</pre>
<pre class="brush:php;toolbar:false;">.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;
};</pre>
<p>私たちはすべての元素に遷移遅延: 0 を追加しましたが、機能しませんでした。
