앱 애니메이션 전환 효과 예시 공유를 실현하기 위해 전환과 결합된 Vue-router

이 기사에서는 주로 앱의 앞으로 및 뒤로 애니메이션 전환 효과를 얻기 위해 전환과 결합된 Vue-router를 사용하는 예를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

첫 번째: 경로를 구성하고 라우팅 구성을 수정합니다.

라우팅 구성은 핵심 사항에 들어가지 않습니다. VueRoute에 goBack 메소드를 추가하여 경로의 정방향 및 역방향 상태를 기록합니다.

this.isBack = true VueRouter.prototype.goBack = function () { 
　　this.isBack = true
　　window.history.go(-1)
}

2: 경로 모니터링 변경(경로 변경 시) 이때의 라우팅 상태가 정방향인지 역방향인지 판단)

<template>
　　<p>

　　　　动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为 ：‘slide-left' 和 'slide-right'

　　　　<transition :name="transitionName"> 
　　　　　　<router-view class="Router"></router-view>
　　　　</transition>
　　</p>
</template>

<script>
export default {
　　data() {
　　　　return {
　　　　　　transitionName: 'slide-right' // 默认动态路由变化为slide-right
　　　　}
　　},
　　watch: {
　　　'$route' (to, from) {
　　　　let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
　　　　　　if(isBack) {
　　　　　　　　this.transitionName = 'slide-right'
　　　　　　} else {
　　　　　　 this.transitionName = 'slide-left'
　　　　　}
　　this.$router.isBack = false
　　}
　 }
　}
</script>

Three: 정방향 애니메이션과 역방향 애니메이션에 서로 다른 애니메이션 효과를 추가합니다. 구체적인 코드는 다음과 같습니다.

<style>

.Router {
 position: absolute;
 width: 100%;
 transition: all .8s ease;
 top: 40px;
}

.slide-left-enter,
 .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
</style>

Four: 경로가 앞으로 나아갈 때는 일반적인 방법을 따르세요.

5. 돌아갈 때 goBack 메서드를 호출하면 됩니다.

관련 권장 사항:

CSS3 애니메이션 관련 속성 전환, 애니메이션, 변형

CSS3의 전환 속성에 대한 인스턴스 분석

전환 정보 10가지 추천 기사

위 내용은 앱 애니메이션 전환 효과 예시 공유를 실현하기 위해 전환과 결합된 Vue-router의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!