주문형 구성 요소의 Vue 전환 모드가 작동하지 않습니다.

Question

여러 페이지가있는 SPA가 있습니다. 페이지는 구성 요소이며 웹 팩의 코드 분할을 사용하여 필요할 때로드됩니다.

페이지는 <transition mode="out-in"> 태그로 싸여 있지만 초기 구성 요소가로드 될 때 순차적 전환이 작동하지 않습니다.

여기에 오류 https://github.com/ByEmke/vue-transition-mode-issue을 재현하는 git repo가 ​​있습니다.

[편집] 전환 모드에 대한 질문을 강조하고 싶습니다. 작동하지 않는 변환 모드입니다. 'out-in'은 사라지는 요소를 없애고 나타나기 쉬운 요소를 없애고 순서대로 수행해야하지만, 병행 모드 (전환 모드가 설정되지 않은 것처럼)에서 발생합니다. 초기 구성 요소로드에서는 작동하지 않지만 실행 중에 Github의 예에서 명확하게 볼 수 있지만 나중에 전환 할 때 제대로 작동합니다. 여기

은 GIF는 문제 http://recordit.co/mtiNGNUNCp

Answer 1

을보십시오.

http://recordit.co/KXFrymElAR

P.S. 페이지 아래에 몇 가지 콘텐츠가있을 경우이 패치는 부모님의 키가 0이기 때문에 작동하지 않습니다. 이는 유스 케이스에서는 작동하지만 온 디맨드 콘텐츠 아래에 콘텐츠가 필요할 때 좀 더 해킹이 필요합니다. 수요 구성 요소.

<div id="app"> 
    <div> 
     <transition name="ease" mode="out-in" appear> 
      <component :is="page"></component> 
     </transition> 
    </div> 

    <button @click="first">First page</button> 
    <button @click="second">Second page</button> 
</div> 

스타일링 : 다음 GitHub의 예를 다음

는

,이 템플릿이 지금과 같은 모습입니다

div { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 0; 

    &.ease-enter-active, &.ease-leave-active { 
     transition: opacity 0.2s ease; 
    } 
    &.ease-enter, &.ease-leave-active { 
     opacity: 0; 
    } 
} 

Answer 2

난 당신이 문서 here

편집에서 전환 노드

<transition appear> 
    <!-- ... --> 
</transition> 

에 appear 지침을 놓치고 생각 보여주는 것 : 더 많은 정보 를 I main.vue의 전환 CSS라고 생각하십시오.

<style lang="sass"> 
    h2 { 
     &.ease-enter-active, &.ease-leave-active { 
      transition: opacity 1s ease; 
     } 
     &.ease-enter, &.ease-leave-active { 
      opacity: 0; 
     } 
    } 
</style> 

상대 사업부로 내 페이지를 포장하고 정상에 절대적으로 페이지를 배치, 내가 원숭이 패치거야 스틱 해요, 지금은 그래서이

<style lang="sass"> 
    .ease-enter-active, .ease-leave-active { 
     transition: opacity 1s ease; 
    } 
    .ease-enter, .ease-leave-active { 
     opacity: 0; 
    } 
</style>