VueJs 路由视图转换

Posted 2023-02-22

【中文标题】VueJs 路由视图转换

【英文标题】：VueJs router-view transitions

【发布时间】：2017-07-13 11:31:54

【问题描述】：

每次单击新链接时，我都会尝试在路由器视图组件上创建一些转换。问题是只有一个淡入淡出动画可以工作。例如，它会淡出，但新页面会像平常一样立即出现。基本上我只能拥有一个 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】：

我只是在使用 mode: out-in 它似乎可以正常工作：

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

请检查工作fiddle。

【讨论】：

谢谢。这解决了这个问题。我发现的另一个解决方案是向 .fade-enter-active 添加一个过渡延迟，其持续时间与过渡相同。 .fade-enter-active transition: opacity 0.25s ease; transition-delay: 0.25s;

【参考方案2】：

你可以尝试动态绑定路由转换：

<router-view :transition="$route.transition">
And set the data of transition from your route data

router.map(
  '/About': 
    component:  ... ,
    transition: 'slide'
  
)

【讨论】：

router.map 已被替换为数组文字。 vuejs.org/v2/guide/…