[Vue.js]transition의 in-out과 out-in의 디스플레이 결과 프레젠테이션
입문
Vue.나는 js의
transition
라벨의 속성in-out
과 out-in
의 동작이 다르다는 것을 볼 수 있는 시범을 만들었다.공식 문서여기 있습니다.
환경
- OS: macOS Catalina 10.15.1
- Vue: 2.6.10
기본 문법
<transition mode="out-in">
<!-- ... the buttons ... -->
</transition>
이 값mode
을 in-out
또는 out-in
으로 설정하면 디스플레이가 변경됩니다.지정되지 않음
See the Pen LYERjdZ by terufumi ( @terufumi1122 )
on CodePen .
in-out
우선, 새로운 원소 변환, 완성 후, 현재 원소 변환p>
See the Pen wvBzPJG by terufumi ( @terufumi1122 )
on CodePen .
out-in
우선, 현재 원소의 전환이 완료되면 새로운 원소의 전환이 들어간다p>
See the Pen
XWJjzME by terufumi ( @terufumi1122 )
on CodePen .
おわりに
끝까지 읽어주셔서 감사합니다.
특별한 의도가 없다면 지정
out-in
은 나무랄 데가 없다参考にさせて頂いたサイト(いつもありがとうございます)
Enter/Leave とトランジション一覧 — Vue.js
Reference
이 문제에 관하여([Vue.js]transition의 in-out과 out-in의 디스플레이 결과 프레젠테이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/terufumi1122/items/36e1460eba4618f87aab텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)