CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
Andrew Matthew
Andrew Matthew

Reputation: 432

How to make transition ‘appear’ work on 2nd load rather than initial load

On my website, I’ve got multiple components that are acting as templates for each individual page e.g. ‘home’, ‘about me’, etc… My aim is to have a sliding transition between each page and I’ve achieved this using the transition tag along with the ‘appear’ attribute added and some CSS. My problem is that I don’t want the transition to happen on the first load of my website no matter what page you go to first. I’ve added some example code below for testing purposes to show my problem.

main.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 (with CSS included):

<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 (Also with CSS included):

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

Using the test code supplied you will see that when you go to either ‘/’ or ’/foo’ on initial load, the content will slide in from the side. I would like to know how to make it so that whatever page you initially land on the transition doesn’t happen, but when you go to another page, the transition happens for the rest of the time you’re on the site. Is this possible using the transition tag?

Thanks!

Upvotes: 1

Views: 58

Answers (1)

entio
entio

Reputation: 4263

Upon the first visit you should save in the browser memory the fact that you are visiting it. The transition should only be added if you can read this from memory.

You could for example use a cookie, save it to localStorage or to indexedDB.

Upvotes: 1

Related Questions