VueJs 라우터 뷰 전환

새 라우터를 클릭 할 때마다 라우터보기 구성 요소에서 일부 전환을 만들려고합니다. 문제는 페이드 애니메이션 중 하나만 작동한다는 것입니다. 예를 들어, 페이드 아웃되지만 새로운 페이지가 일반처럼 즉시 나타납니다. 기본적으로 나는 enter-active-class 또는 leave-active-class 만 가질 수 있지만 동시에 둘 다 가질 수는 없습니다. 난 그냥 mode을 사용하고VueJs 라우터 뷰 전환

<template> 

    <div class="tom-layout"> 
     <navBar class="z-depth-0"></navBar> 
     <div class="content-layout"> 
      <transition name="fade"> 
       <router-view></router-view> 
      </transition> 
     </div> 
    </div> 

</template> 

<script> 
    import NavBar from './components/NavBar.vue'; 

    export default { 
     components: { 
      navBar: NavBar 
     } 
    } 

</script> 

<style lang="scss"> 
    @import url('https://fonts.googleapis.com/css?family=Ek+Mukta'); 

    body { 

     overflow: hidden; 

     .content-layout { 
      margin-top: -64px; 
      width: 100%; 
      z-index: -5; 
     } 
    } 


.fade-enter { 
    opacity: 0; 
} 

.fade-enter-active { 
    transition: opacity 2s ease; 
} 

.fade-leave { 

} 

.fade-leave-active { 
    transition: opacity 2s ease; 
    opacity: 0; 
}

출처

2017-02-23 TomMi DumMi

는 : out-in이 함께 잘 작동 것 같다 :

<transition name="fade" mode="out-in"> 
    <router-view></router-view> 
    </transition>

fiddle 작업 확인하시기 바랍니다.

출처

2017-02-23 06:26:00 Saurabh

감사합니다. 이렇게하면 문제가 해결됩니다. 내가 찾은 또 다른 해결책은 전환과 동일한 지속 시간으로 페이드 - 입력 - 활성에 전환 지연을 추가하는 것이 었습니다. '.fade-enter-active { \t 전환 : 불투명도 0.25s 용이함; \t 전환 지연 : 0.25 초; }' –

VueJs 라우터 뷰 전환

답변

관련 문제