vue, 동적 구성 요소의 애니메이션이 트리거되지 않습니까?

Question

나는이 같은 페이지가 :

<div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#" @click="currentView='create'">Create</a> 
        </li> 
        <li> 
         <a href="#" @click="currentView='how'">How</a> 
        </li> 
        <li> 
         <a href="#" @click="currentView='about'">About</a> 
        </li> 
        <li> 
         <a href="#" @click="currentView='youtube'">Videos</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <keep-alive> 
     <component :is="currentView" transition="fade" transition-mode="out-in"></component> 
    </keep-alive> 
</div> 

JS를 :

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import Create from '../components/homepage/create.vue'; 
import How from '../components/homepage/how.vue'; 
import About from '../components/homepage/about.vue'; 
import Youtube from '../components/homepage/youtube.vue'; 
import Navigation from '../components/navigation.vue'; 

Vue.component('navigation', Navigation) 
Vue.component('create', Create) 
Vue.component('how', How) 
Vue.component('about', About) 
Vue.component('youtube', Youtube) 

new Vue({ 
    el: '#app', 
    data: { 
     currentView: 'create' 
    } 
}) 

말대꾸 :

.fade-transition { 
    transition: opacity 0.2s ease; 
} 

.fade-enter, 
.fade-leave { 
    opacity: 0; 
} 

그 코드가 분명히 그들은 전환 할 때 애니메이션을 가지고 구성 요소를 확인해야합니다. 그들은 애니메이션없이 전환하지만, 왜 이런 일이 일어나서 뭔가 빠졌는가?

Answer 1

<keep-alive> 
    <transition name="fade" mode="out-in"> 
     <component :is="currentView"></component> 
    </transition> 
</keep-alive> 

이것이 작동하는지 확인하십시오. 또한 CSS가 포함되어 있는지 확인하십시오.