我是否缺少vue路由器转换的内容？

Question

I'm trying to have a transition between my components in Vue, this is my code:

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}

However, the transition is not working at all. It correctly switches from component to component, but without transition.

I've read the Vue and Vue Router docs, and as far as I know I'm doing exactly what the docs are saying. Anyone knows what I'm missing or doing wrong?

Answer 1

Something defines the .fade-enter and .fade-appear classes. You can see this happening if you have a link that calls the debugger after one tick, and inspect the applied styling:

stopThings () {
  this.$router.push({
    name: 'Login'
  });

  this.$nextTick(() => {
    debugger;
  });
}

Because the initial state is incorrect, the transition does not do anything.

Rename your transition and your transition classes to literally anything else, eg myfade and your transition works as expected.

Answer 2

The transitions, as far as I can see from the code shared, looks fine. It could be that the transitions are happening outside of the view. During the transition, both elements are visible

here is an example of adding a wrapper with relative and absolute positionsing

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

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

<style scoped>
.content {
  position: relative;
}
.content > * {
  position: absolute;
  top: 0;
  left: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>