# [Vue.js] Am I missing something for vue router transitions?

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

<template>
<div id=”app”>
<router-view></router-view>
</transition>
</div>
</template>

<script>
export default {
name: ‘App’
}
</script>

<style scoped>
transition: opacity .5s;
}
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.js and vue.js 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?

### Solution :

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 the transition and the transition classes to literally anything else, e.g. myfade and the transition works as expected.

### Solution 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”>
<div class=”content”>
<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;
}