CODEWITHSUNDEEP
vue.js
user12481721
user12481721

Reputation:

Page slide transition in Vue?

I'm building an app with Vue.js and I'd like to give more native-like view to it. How can I add page slide transition?

My current code:

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>
...
.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}

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

I want it to look like:

Click here

Using the @Ifaruki's code:

Click here

Upvotes: 6

Views: 11095

Answers (2)

ZecKa
ZecKa

Reputation: 2934

In the example you show there are two transitions: Forward, backward. So you will have to find a way to change the transition depending on the link you click on. You can use vuex store for that.

Once vuex installer and configured you can do something like below:

Check live example in codesandbox: https://codesandbox.io/s/vuejs-transition-slide-in-out-yzc05

SCSS : Style your transition (P.ex in App.vue)


$duration: 0.5s;
.transition {
  overflow: hidden;
}
.router-view,
.router-view-back {
  &-enter-active,
  &-leave-active {
    position: fixed;
    width: 100%;
    background: white;
    min-height: 100vh;
    top: 0;
  }
}
// router view
.router-view-enter-active {
  transition: transform $duration ease-in-out;
  z-index: 2;
  transform: translateX(100%);
}
.router-view-enter-to {
  z-index: 2;
  transform: translateX(0%);
}
.router-view-leave-active {
  z-index: -1;
}
.router-view-leave-to {
  z-index: -1;
}
// router view back

.router-view-back-leave-active {
  transition: transform $duration ease-in-out;
  z-index: 2;
  transform: translateX(0%);
}
.router-view-back-leave-to {
  z-index: 2;
  transform: translateX(100%);
}

Template of App.vue

<template>
  <div id="app">
    <transition
      :name="$store.state.pageTransition.name"
      :mode="$store.state.pageTransition.mode"
      v-on:after-enter="afterEnter"
      v-on:after-leave="afterLeave"
    >
      <router-view class="transition"/>
    </transition>
  </div>
</template>

Methods of App.vue

methods: {
    afterEnter: () => {
      window.scrollTo(0, 0);
    },
    afterLeave: () => {
      Store.commit("setPageTransition", "default");
    }
  }

Link previous (Change transition)

Template

 <button @click="goBack()">Previous page</button>

Method

goBack() {
      this.$store.commit("setPageTransition", "back");
      this.$router.push({
        name: "home"
      });
}

Upvotes: 8

Ilijanovic
Ilijanovic

Reputation: 14914

You should learn about Vue.js router before you do page transition.

https://router.vuejs.org/guide/advanced/transitions.html#per-route-transition

Edit: an slide effect should work like this:

 transition name="slide" mode="out-in">
   <router-view></router-view>
 </transition>
 ...
 .slide-enter-active, .slide-leave-active {
   transition: 300ms;

  }
 .slide-enter-to{
    position: relative;
    left: 0;
 }
 .slide-leave{
    position: absolute;
   }
 .slide-enter,  {
    left: -100vw;
    position: absolute;
  }
 .slide-leave-to {
    right: -100vw;
 }

Upvotes: 1

Related Questions