javascript - vue2.0 전환 호버 이벤트

Question

vue2.0 전환을 사용하여 마우스를 위로 움직이고, 화면 외부에서 QR 코드를 밀어내고, QR 코드를 남겨두고 화면 밖으로 밀어내는 효과를 얻는 방법

Answer 1

vue의 전환 컴포넌트는 애니메이션에 들어갈지 아니면 떠날지 판단하기 위해 컴포넌트의 요소를 v-if로 표시하므로 해당 애니메이션을 작성한 후 마우스를 디스플레이로 이동하고 숨김을 남겨주세요

Answer 2

html

으아악

css

으아악

화면 밖에서 슬라이드로 들어가고 싶다면 CSS 스타일을 이렇게 바꾸면 됩니다.