Суть такова что при переходе на разные ссылки приложения, происходит скачок дерганный какой то не могу понять, все элементы рендерятся в середине а потом прыгают вверх до нужно места, не могу понять почему так. Но когда задаю блоку с классом "home" position absolute, все становится нормально и анимация перехода из одного роута в другой становиться нормальны но так же не должно быть...
//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>
Простой
