javascript - vue2.0 transition hover事件

Question

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

Answer 1

Vue のトランジション コンポーネントは、コンポーネント内の要素に対して v-show v-if を実行して、アニメーションに入るかアニメーションから離れるかを決定します。そのため、対応するアニメーションを作成した後、マウスを移動すると表示され、マウスを移動すると非表示になります

Answer 2

html

リーリー

CSS

リーリー

画面の外からスライドインしたい場合は、CSSのスタイルを変更するだけで、おそらく次のように書くだけです