时间戳

首页 > 解决方案 > Vue 3 – 淡入淡出过渡

javascript - Vue 3 – 淡入淡出过渡

问题描述

然而，我阅读了 Vue 2 的转换更改并阅读了 Vue 3 文档，但我仍然无法弄清楚如何使转换工作。我对 Vue 很陌生。

旧页面应该淡出，新页面应该淡入，但我无法让它工作。

<transition>除了默认组件之外，我真的不知道在包装器中写什么。我尝试将组件更改为视图的名称，但这不起作用。

我的App.vue

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

我的 CSS：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

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

我的文件夹结构：

Components: – Header.vue
  |         - Footer.vue
  |
Views:      - Home.vue
            - About.vue
            - Something.vue

感谢您提供有关如何使淡入淡出工作的任何提示！

标签： javascriptfadevuejs3

解决方案

尝试.fade-leave-to改用：

Vue.createApp({
  setup() {
    const test = Vue.ref(false);
    
    return { test }
  }
}).mount('#app')
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="test">FADE</div>
  </transition>
  <button @click="test = !test">TOGGLE</button>
</div>

使用您的代码段的示例：

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

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s ease;
}

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

推荐阅读