JavaScript - vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを残して画面の外側にスライドさせる効果を実現する方法。

Question

vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを残して画面の外にスライドさせるエフェクトを完成させる方法。以下は私が書いたコードです。 ,
しかし、私が書いたものは失敗しました はい: マウスを上に動かすとボックスはスライドしますが、マウスを離れることなくボックスは消えます。

.エルワイマ {

リーリー

Answer 1

以下に変更して試してみてください

リーリー

またはこのように

リーリー

Answer 2

このようにCSSを書くことはできません。 .fade-enter-active、.fade-leave-activeクラスはアニメーションが完了すると削除されます。そのため、アニメーションが実行された後は、元のCSSスタイルになります。 2 またQRコードが消えてしまいました

リーリー