Gridsome Vue - animation between routes

Question

I'm looking for a solution to make animation between routes in gridsome. I would like to create full width and height overlay animating from left to right. When the overlay is on full width then it should replace the content in the slot.

What I was trying to do is

    <div class="overlay" :class="{ 'overlay--open': overlayOpen }"></div>
    <transition
        appear
        v-on:before-appear="beforeAppear"
        v-on:appear="appear"
        v-on:after-appear="afterAppear"
    >
        <main>
            <slot/>
        </main>
    </transition>

and in methods

methods: {
    beforeAppear: function (el) {
        this.overlayOpen = true
    }
}

style

.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #0c0c0c;
  z-index: 99999;
  transition: all 500ms;
  transform-origin: left;
  transform: scaleX(0);

&--open{
    animation: open 1s;
}


@keyframes open {
0% {
    transform: scaleX(0);
}
50% {
    transform: scaleX(1);
}
100% {
    transform: scaleX(0);
}

It almost worked but I don't think that is good practice for route transition. If you have any idea how to make it I would really appreciate it. Thanks

score 0 · Answer 1 · edited Jul 16 '22 at 05:42

Welcome to StackOverflow!

This isn't working because the values you're trying to use on <transition> don't exist. Transitions don't have a before-appear hook by default and would require you modifying the <transition> element to have this element.

Instead you want to use <transition name="open" appear> and reference the css classes of:

.open-enter-active {
  transition: transform 1s;
}

.open-enter {
  transform: scaleX(0);
}

You can also remove your div.overlay and method. The above CSS should set you on the path towards what you want - but isn't exactly the effect you're going for.

You can also read more about Vue Transitions here which outlines the CSS classes you can utilize if you want more control than just -enter and -enter-active (you'll need to remove appear from the transition in that case).

Hope this helps!

Gridsome Vue - animation between routes

1 Answers1