vue 의 과도 애니메이션 에 대해 간단히 이야기 합 니 다(추천)

vue 에서 과도 애니메이션 을 실현 하 는 것 은 보통 다음 과 같다.

<transition name="fade">
 <div></div>
</transition>

transition 으로 요소 나 구성 요 소 를 패키지 합 니 다.
과도 할 때 4 개의(CSS)클래스 가 enter/leave 과도 에서 전 환 됩 니 다.
1.v-enter:과도 에 들 어 가 는 시작 상 태 를 정의 합 니 다.요소 가 삽입 되 었 을 때 유효 합 니 다.다음 프레임 에서 제거 합 니 다.
2.v-enter-active:과도 에 들 어간 종료 상 태 를 정의 합 니 다.요소 가 삽입 되 었 을 때 유효 합 니 다.transition/animation 이 끝 난 후에 제거 합 니 다.
3.v-leve:과도 에서 벗 어 나 는 시작 상 태 를 정의 합 니 다.과도 에서 벗 어 날 때 적용 되 며 다음 프레임 에서 제거 합 니 다.
4.v-leave-active:과도 에서 벗 어 나 는 종료 상 태 를 정의 합 니 다.과도 가 실 행 될 때 유효 하 며,transition/animation 이 완 료 된 후에 제거 합 니 다.
위 는 공식 문서 의 원 어 이지 만 이 네 가지 유형 은 어떻게 활용 합 니까?다음은 예 를 보 겠 습 니 다.

<transition name="fold">
 <div v-show="show" class="example"></div>
</transition>

css:
.example {
 width: 100px;
 height: 100px;
 transform: translate3d(0, -100px, 0);
}
.fold-enter-active, .fold-leave-active {
 transition: all .5s;
}
.fold-enter, .fold-leave-active {
 transform: translate3d(0, 0, 0);
}

show=true 일 때:
이 곳 의 fold-enter 는 요소 가 표시 되 는 순간 에 추 가 된 다음 에 순식간에 제거 되 었 습 니 다.위의 예 에서 example 라 는 블록 요 소 는 원래 transform:translate3d(0,-100 px,0)라 는 스타일 이 있어 서 100 px 위로 옮 겨 졌 습 니 다.그러나 fold-enter 때문에 example 라 는 블록 요 소 를 제자리 로 옮 겼 습 니 다.그러나 fold-enter 는 순간 제거 되 었 기 때문에 이때 요소 의 스타일 은 transform:translate3d(0,-100 px,0)로 바 뀌 었 습 니 다.그러나 이때 fold-enter-active 라 는 스타일 은 효력 이 발생 합 니 다.transition:all.5s 를 설정 하기 때문에 요 소 는 0.5s 시간 안에 100 px 를 위로 이동 합 니 다.과도 애니메이션 이 끝 난 후에 fold-enter-active 라 는 종 류 는 바로 제 거 됩 니 다.
show=false 일 때:
example 는 바로 사라 지지 않 습 니 다.이 럴 때 fold-leve-active 라 는 클래스 가 작용 합 니 다.example 의 위 치 는-100 px 이 고 fold-leve-active 는 과도 적 인 종료 상태 로 정 의 됩 니 다.transform:translate3d(0,0,0).그러나 transition:all.5s 를 동시에 설정 하 였 기 때문에 이 때 요 소 는 0.5s 시간 내 에 100 px 를 아래로 이동 한 후 fold-leve-active 가 제 거 됩 니 다.
홈 페이지 그림

또한 애니메이션 에서 js 갈고리 함 수 를 호출 할 수 있 습 니 다.

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
</transition>

그러나 사용 하 는 것 이 많 지 않 습 니 다.methods 에서 이 방법 들 을 정의 할 수 있 습 니 다.
이상 의 이 간단 한 이야기 vue 의 과도 애니메이션(추천)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.