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'
    }
})

SASS：

.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。

vue，动态组件上的动画不会触发？

1 个答案: