javascript - 如何使转换 ‘appear’ 在第二次加载而不是初始加载时工作

Question

在我的网站上，我有多个组件充当每个单独页面的模板，例如“主页”、“关于我”等……我的目标是在每个页面之间实现滑动过渡，我已经使用过渡标签以及添加的“出现”属性和一些 CSS 实现了这一点。我的问题是，无论您首先访问哪个页面，我都不希望在我网站的第一次加载时发生转换。为了测试目的，我在下面添加了一些示例代码以显示我的问题。

主要.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './Home'
import Foo from './Foo'

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

App.vue:

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/foo">Foo</router-link>
    <router-view></router-view>
  </div>
</template>

Home.vue(包含 CSS):

<template>
    <transition name="home-slide-fade" mode="out-in" appear>
        <main>
            <div>Home</div>
        </main>
    </transition>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style lang="scss" scoped>
    main {
        position: absolute;
        width: 100%;
    }
    .home-slide-fade-enter-active, .home-slide-fade-leave-active {
        transition: all .8s ease;
    }
    .home-slide-fade-enter, .home-slide-fade-leave-active {
        opacity: 0;
    }
    .home-slide-fade-enter {
        transform: translateX(-100%);
    }
    .home-slide-fade-leave-active {
        transform: translateX(-100%);
    }
</style>

Foo.vue(也包含 CSS):

<template>
    <transition name="foo-slide-fade" mode="out-in" appear>
        <main>
            <div>Foo</div>
        </main>
    </transition>
</template>

<script>
    export default {
        name: "Foo"
    }
</script>

<style lang="scss" scoped>
    main {
        position: absolute;
        width: 100%;
    }
    .foo-slide-fade-enter-active, .foo-slide-fade-leave-active {
        transition: all .8s ease;
    }
    .foo-slide-fade-enter, .foo-slide-fade-leave-active {
        opacity: 0;
    }
    .foo-slide-fade-enter {
        transform: translateX(100%);
    }
    .foo-slide-fade-leave-active {
        transform: translateX(100%);
    }
</style>

使用提供的测试代码，您会看到当您在初始加载时转到“/”或“/foo”时，内容将从侧面滑入。我想知道如何做到这一点，以便您最初登陆的任何页面都不会发生转换，但是当您转到另一个页面时，转换会在您访问网站的其余时间发生。这可能使用转换标签吗？

谢谢!

Answer 1

第一次访问时，您应该在浏览器内存中保存您正在访问它的事实。仅当您可以从内存中读取时才应添加过渡。

例如，您可以使用 cookie，将其保存到 localStorage 或 indexedDB。