Vue 에서 과도 애니메이션 디 더 링 문 제 를 해결 합 니 다(인 스 턴 스 상세 설명)

머리말Vue-Router는Vue의 핵심 모듈 로 서 구성 요 소 를 바탕 으로 하 는 경로 설정,경로 파라미터 등 기능 을 제공 하여 단일 페이지 응용 을 더욱 쉽게 관리 할 수 있 도록 한다.좋 은 경로 관리 가 특히 중요 하 다.예 를 들 어 경로 차단,경로 게 으 름 로드,경로 권한 등 은 모두 개발 에서 중요 한 역할 을 한다.또한 경로 도 보기 과도 효 과 를 지원 합 니 다.과도 애니메이션 을 추가 하지 않 은 경로 전환 은 딱딱 하 게 느껴 집 니 다.사용자 체험 을 향상 시 키 기 위해 서 는 경로 전환 이 필요 합 니 다.어쨌든 만들어 내 면 자기가 보기에 도 편 하 다.
과도 효과 문서:https://cn.vuejs.org/v2/guide/transitions.html
과도 애니메이션 디 더 링
코드 세 션
경로 에 페이드아웃 과도 효 과 를 추가 합 니 다.

<div id="app">
 <main class="app-main">
 <Topbar />
 <transition name="fade">
 <router-view />
 </transition>
 </main>
</div>
.fade-enter,
.fade-leave-to{
 visibility: hidden;
 opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

효과.

그림 에서 길 을 바 꿀 때 페이지 가 떨 리 고 떨 리 는 것 이 적지 않 아 강박 증 이 도 지 는 것 을 볼 수 있다.
그렇다면 문제 가 생 겼 는데 왜 이런 상황 이 벌 어 졌 을 까?
프로 세 스
문제점 을 발견 하 다
코드 문 제 를 제거 한 후에 생각 나 는 것 은 레이아웃 문제 로 인 한 이런 상황 일 수 있 습 니 다.그래서 chrome 디 버 깅 도구 에서 길 을 바 꾸 면서 구조의 변 화 를 관찰 한 결과 이상 한 점 을 찾 았 습 니 다.

html 의 구 조 를 자세히 살 펴 보면 경로 가 과도 하 는 과정 에서 두 개의 경로 가 동시에 존재 하 는 것 을 발견 할 수 있 습 니 다.하 나 는 곧 들 어 갈 경로 이 고 하 나 는 곧 사라 질 경로 입 니 다.이때 그 중의 한 경로 가 자 리 를 차지 하여 떨 릴 수 있 습 니까?
실증 하여 추측 하 다.
구조 상황 을 편리 하 게 관찰 하기 위해 과도 시간 을 30s 로 늘 리 고 위의 조작 을 다시 반복 합 니 다.

느 린 과도 에서 다음 경로(fade-enter-to)로 전환 할 때 이전 경로(fade-leve-to)가 자 리 를 차지 하여 다음 경로 의 위 치 를 아래로 이동 시 키 기 때문에 빠 른 과도 상황 에서 떨 림 과 같은 효과 가 발생 합 니 다.
기왕 문 제 를 찾 았 으 니,그것 을 해결 할 방법 을 찾 아 라!
문 제 를 해결 하 다
fade-leave-to 경로 에display:none를 추가 하여 사라 질 때 자 리 를 차지 하지 않 으 면 문 제 를 해결 할 수 있 습 니 다.물론 포 지 셔 닝 으로 문서 흐름 에서 벗 어 나 해결 할 수도 있 지만 포 지 셔 닝 후 오프셋 등 을 계산 해 야 하기 때문에 추천 하지 않 습 니 다.

.fade-enter{
 visibility: hidden;
 opacity: 0;
}
.fade-leave-to{
 display: none;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

최종 효과

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 가 과도 애니메이션 디 더 링 문 제 를 해결 하 는 데 도움 이 되 기 를 바 랍 니 다!