Why is Vue routing jerky?

Question

css

The bottom line is that when you go to different links of the application, there is a jerky jump that I can’t understand, all elements are rendered in the middle and then jump up to the right place, I can’t understand why. But when I set the block with the class "home" position absolute, everything becomes normal and the animation of the transition from one route to another becomes normal, but it shouldn't be either...
//App.vue

<template>
  <div id="app">
    <div class="main">
      <transition name="fade">
      		<router-view></router-view>
      </transition>
    </div>


    <navigation></navigation>
    <controlPanel></controlPanel>
  </div>
</template>

<script>
import Navigation from './includes/navigation.vue';
import ControlPanel from './includes/controlPanel.vue';
export default {
  name: 'app',

  components: {
          Navigation,
          ControlPanel
        },

  data () {
  return {

    }
  }
}
</script>

<style lang="sass">
*
  box-sizing: border-box

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  vertical-align: baseline
html, body
  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  background: #0c0c0c
  width: 100%
  height: 100%
  overflow: hidden
h1
  font-size: 32px
h2
  font-size: 24px
h3
  font-size: 19px
h4
  font-size: 16px
h5
  font-size: 14px
h6
  font-size: 13px
img
  display: block
  width: 100%
  height: auto
a
  color: #333
  text-decoration: none
input, textarea
  display: block
  outline: none

button
  outline: none
  cursor: pointer
#app
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 100%
.main
  position: relative
  z-index: 2
  order: 2
  width: 96%
  height: 100%

.container
  position: relative
  width: 100%
.fade-enter-active, .fade-leave-active
  transition: opacity .5s
.fade-enter, .fade-leave-to
  opacity: 0
</style>

//Home.vue

<template>
  <div class="home">
    <div class="greeting">
      <h1 class="greeting-brandname">SelfIT</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Alias consequatur dolor, illo magnam nulla reprehenderit!</p>
    </div>
    <particles></particles>
  </div>


</template>

<script>
  import Particles from '../components/particles.vue';

  export default {


    components: {
      Particles
    },

    data () {
      return {

      }
    }
  }
</script>

<style lang="sass">
.home
  height: 100%
  background: url(../../assets/computer.jpg)
  background-size: cover
  overflow-y: auto
  &::after
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(0, 0, 0, 0.3)
.greeting
  position: absolute
  bottom: 20%
  left: 5%
  z-index: 2
  color: #fff
  &-brandname
    position: relative
    margin-bottom: 20px
    font-size: 150px
    line-height: 130px
    &::after
      content: ""
      position: absolute
      bottom: 0
      left: 0
      width: 150%
      height: 3px
      background: linear-gradient(to right, #fff 50%, orange 100%)
</style>

//Work.vue

<template>
  <div class="works">
    <a class="works-item" v-for="work in works" :href="work.link">
      <h2>{{ work.name}}</h2>
      <p>{{ work.description }}</p>

    </a>
  </div>
</template>
<style lang="sass">
.works
  display: flex
  justify-content: center
  flex-wrap: wrap
  padding: 20px 10%
  overflow: auto
  &-item
    display: flex
    justify-content: center
    align-items: center
    flex-flow: column
    width: 30%
    height: 200px
    margin: 0 1.5% 20px
    background: #fff
    border-radius: 4px

h1
  color: #fff
</style>

Answer 1

<transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>

Answer 2

is it a link to follow?
do it like this:
https://router.vuejs.org/en/api/router-link.html