VueJs路由器视图转换-Java 学习之路

每次单击新链接时，我都会尝试在路由器视图组件上创建一些转换 . 问题是只有一个淡入淡出动画会起作用 . 例如，它会淡出，但新页面会像平常一样立即出现 . 基本上我只能使用enter-active-class或leave-active-class，但不能同时使用 .

<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;
}

1 回答

10
我只是使用mode： out-in 似乎工作正常：
```
<transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
```
请检查fiddle .
回复于 2024-04-20T15:46:34+08:00

VueJs路由器视图转换

1 回答

相关问题