CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Tim Hef
Tim Hef

Reputation: 83

Fade in/out not working in Vue's Router Transition

Issue:

I'm using Vue's Router which correctly switches from component to component. However, I wrapped it inside a <transition name="fade" mode="out=in">but it does not fade at all.

Expected Behaviour:

Switch from component to component using a fade effect.

Repoduced issue:

Cloned my project into a CodeSandbox, the router links are located below the forms. Project URL:

https://codesandbox.io/s/z2kjlyrq64?fontsize=14

Really hope someone is able to help me out.

Upvotes: 1

Views: 760

Answers (1)

Ricky Ruiz
Ricky Ruiz

Reputation: 26771

Problem:

Everything is correct except that the transition name fade is not scoped in your App.vue file.

The third party framework used already has a fade CSS rule which is overriding yours.

enter image description here

Fix:

Change the transition name.

<template>
  <div id="app">
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :xs="24" :sm="24" :lg="15" :xl="17" class="bg-img"></a-col>
      <a-col :xs="24" :sm="24" :lg="9" :xl="7" class="height-50">
        <transition name="fade-custom" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style lang="scss">
.fade-custom-enter-active,
.fade-custom-leave-active {
  transition: opacity 0.5s;
}
.fade-custom-enter,
.fade-custom-leave-to {
  opacity: 0;
}
</style>

Revised CodeSandbox

Upvotes: 1

Related Questions