[Vue.js]transition의 in-out과 out-in의 디스플레이 결과 프레젠테이션

3184 단어 Vue.js초보자

입문


Vue.나는 js의 transition 라벨의 속성in-outout-in의 동작이 다르다는 것을 볼 수 있는 시범을 만들었다.
공식 문서여기 있습니다.

환경

- OS: macOS Catalina 10.15.1
- Vue: 2.6.10

기본 문법

<transition mode="out-in">
  <!-- ... the buttons ... -->
</transition>
이 값modein-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


좋은 웹페이지 즐겨찾기