Transition between Vuejs views takes too long in one direction

Question

I'm experimenting with VueJS. I made a very lightweight "app" that only has two views in it: "Home" and "MineSweeper". In the App.vue I created a navigation bar that has buttons that point to these views and I displayed the views with the RouterView component.

I tried using the Transition component so that when the home page loads and whenever Im switching between views, there is a fade-in fade-out effect.

This is my App.vue:

<template>
  <div class="nav">
    <RouterLink to="/" class="navIcon">Home</RouterLink>
    <RouterLink to="/mine" class="navIcon">Minesweeper</RouterLink>
  </div>

  <RouterView v-slot="{ Component }">
    <Transition name="fade" mode="out-in">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

<script lang="ts">
/* just boilerplate script with defineComponent. Its practically empty*/
</script>

<style scoped>
.nav {
  width: 100vw;
  height: 5vh;
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.navIcon {
  border: none;
  background-color: black;
  color: white;
  text-decoration: none;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 30px;
}
.fade-enter-active,
.fade-leave-active {
  transition: 1500ms ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

When I initially load the home page, the fade-in effect works. When I switch over to the MineSweeper view, it works. When Im on the MineSweeper view and try to change back to Home view, it takes ~25 seconds, despite I set the transition to 1500ms. It takes ~25 seconds, whether the transition is 1ms or 10000ms.

Any ideas? Do you need any more files?

Thanks in advance!

Edit:

Ive checked performance in dev tools. It shows nothing but dropped frames for 25s. Then it occured to me that in the Minesweeper view, I made an animated background that takes 25 seconds then it restarts:

.body {
  height: 95dvh;
  background: linear-gradient(-45deg, #692612, #860b3a, #092499, 
#0f965e);
  background-size: 400% 400%;
  animation: gradient 25s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

So it seems the app fades out, then waits one full iteration of the animation, then fades in the new view. If I disable only the animation it works fine. Now I just have to figure out how to make it work WITH the animation...

Answer 1

Okay, so as Ive said the problem was the 25 second background animation. To make it work, I had to do a dynamic class binding to the HTML element thats affected by the animation (in this case the div.body):

<div class="body" :class="{ 'mine-sweep-animation': isActive }">
<-- rest of the template -->

The CSS change for this:

.body {
  height: 95dvh;
  background: linear-gradient(-45deg, #692612, #860b3a, #092499, #0f965e);
  background-size: 400% 400%;
}
.mine-sweep-animation {
  animation: gradient 25s ease infinite;
}    
// @keyframes stays the same

There is an "isActive" variable bound to the div.body class. Simply set it to true in the data part of definecomponent, and set it to false when you leave the component via beforeRouteLeave:

export default defineComponent({
  name: "MineSweeper",
  data() {
    return {
    // bunch of other data
      isActive: true,
    };
  },
  computed: {
  // bunch of computed parameters
  },
  methods: {
  // bunch of methods
  },
  beforeRouteLeave() {
    this.isActive = false;
  },
});

This will make everything work. Only downside is that when I change back to "Home" view, the beforeRouteLeave triggers instantly, so the animation stops while the fade-out is in progress, so one can see the animation reset to its 0second state, which isnt the prettiest, but oh well, cant have everything.