【问题标题】:Vue route page animation and transtion not workingVue路由器页面动画和过渡不起作用
【发布时间】:2021-10-01 07:40:57
【问题描述】:

嗨,我的 vue 3 项目路由页面动画和过渡不起作用

    <template>
  <app-header />

  <router-view v-slot="{ Component }" :key="$route.fullPath">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>

  <app-foother />
  <div v-on:click="pageTop()" class="downUpArrow">
    <i class="fas fa-chevron-up"></i>
  </div>
</template>

我的路由器链接头组件不是我添加的路由器链接添加不起作用的转换

【问题讨论】:

    标签: vue.js vuejs3


    【解决方案1】:
    <template>
      <div id="nav">
        <!-- routes -->
      </div>
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </template>
    
    <style>
    /* ... */
    
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s ease;
    }
    
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
    </style>
    
    

    Repo

    【讨论】:

    • 克里斯我这样做了,但它仍然不起作用
    • Okey Chris 没问题
    • 我建议复制我的templatescript 看看它是否在你的应用程序中工作,然后添加其他组件和属性,以找出问题所在。
    猜你喜欢
    • 2016-06-09
    • 2019-02-20
    • 2018-08-15
    • 2018-02-28
    • 1970-01-01
    • 2021-11-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多