Почему при роутинге во Vue происходит дерганность?

Question

[gpyshenko]

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

Comments

[RaulDuke]

Эх, в песочнице бы какой на это посмотреть, что-то тяжко после трудового дня все это в голове рендерить.

[furrya_black]

Сталкивался с таким в сложном spa.

У вас какой то элемент завернуть в/на v-if или v-show. При переходе элемент скрывается , но после перехода.

Я прикручивал velocity и в ручную менял opacity контента роутинга

[furrya_black]

То есть при переходе выставляем router view 0, меняем делэй пока не увидим плавное появление контента сразу после перехода.

Вы юзаете transitions?

[furrya_black]

Выставляем router view 0 значит выставляем opacity router view в 0

Answer 1

[Антон Антон]

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

Comments

[gpyshenko]

Спасибо, но я уже сам допер, несколько раз перечитал раздел анимации))

Answer 2

[RidgeA]

переход по ссылке это?

<a class="works-item" v-for="work in works" :href="work.link">

надо так:
https://router.vuejs.org/en/api/router-link.html

Comments

[gpyshenko]

Я использую vue-router у меня с переходами не проблема, проблема в том что идет какой то скачок, если я элементу не даю position: absolute, как только даю postion: absolute переходит мягко с анимацией, просто в чем проблема может быть не могу понять
Вложенность компонентов или что

[myskypesla]

gpyshenko: Залей код в песочницу, так будет проще помочь. Скорее всего с высотой проблема.