[Vue.js] 레벨을 바꾸는 발동 시기 요약[부대 프레젠테이션]

입문

Vue.js의 과도 등급 발동 시기를 총결하였다.
공식 홈페이지가 여기 있습니다.

이 기사가 유용한 사람

Vue.js 초보자

이 문장의 장점

과도급이 언제 발동되는지 안다.

환경

- OS: macOS Catalina 10.15.1
- Vue: 2.6.10

트랜지션이란 무엇입니까?

Vue.js의 기능은 CSS 전환/애니메이션을 더욱 쉽게 사용할 수 있도록 합니다.

기본 문법

index.html

...略
<div id="app">
  <transition>
    トランジションさせたい要素
  </transition>
</div>
...略

main.js

new Vue ({
  el: '#app'
})

간단하게 <transition>로 둘러싸기 때문에 간단하다.

과도 클래스 일람표

※ 그림의 예는 조롱opacity의 경우입니다.

Enter 시리즈

전환 수준
타이밍
.v-enter
시작하다
.v-enter-to
끝내다
.v-enter-active
변화 기간

Leave 과

전환 수준
타이밍
.v-leave
시작하다
.v-leave-to
끝내다
.v-leave-active
변화 기간
※ 초상화는 공식 문서 에서 빌려 썼습니다.

정시 확인용 프레젠테이션

See the Pen rNaMNgo by terufumi ( @terufumi1122 )
on CodePen .

끝내다

끝까지 읽어주셔서 감사합니다.
여담이지만 끼워보기는 처음입니다CODEPEN!

복제품만으로 할 수 있을 줄은 몰랐는데, 문턱이 상당히 낮았다

참고로 사이트 (항상 감사합니다)

• Enter/Leave 및 변환 요약 - Vue.js