Currently, I am in the process of working on my personal website. For the frontend, I have been using Vue.js along with vue-router. Everything was functioning smoothly until today, as evidenced here: (you will need to scroll down or use the arrow key down). However, after making some unknown changes, the transition stopped working.
This is how it is currently behaving: . I cannot pinpoint exactly what the changes were that triggered this shift in behavior, so I am reaching out in case someone might have an idea.
In case you want to look at the code, it includes sourcemaps which allow for a detailed inspection of the Vue.js source code.
One specific issue to address is that the page transition animation is not occurring. Despite hours of searching, I haven't managed to identify the root cause. If anyone can provide a hint regarding what part of the code might be causing this problem, please let me know and I'll update the question accordingly.
Here's the snippet of code that could potentially be the culprit:
App.vue
<template>
<div class="ulbricht-app" id="app" @wheel="navigateWheel" @keyup.down="navigateNext" @keyup.up="navigatePrevious">
<ribbon v-if="!$route.meta.isHelloWorld"/>
<transition>
<div class="ulbricht-slice__top" :class="{ 'ulbricht-slice__hello-world': $route.meta.isHelloWorld }"></div>
</transition>
<NavIndicator v-if="!$route.meta.isHelloWorld"/>
<transition name="ulbricht-router__fade" mode="out-in">
<router-view/>
</transition>
<transition>
<div class="ulbricht-slice__bottom" v-if="!$route.meta.isHelloWorld"></div>
</transition>
</div>
</template>
<script>
export default {
components: {
NavIndicator,
Ribbon
},
name: 'App',
mounted() {
window.addEventListener('keyup', (event) => {
if (event.key === 'ArrowUp') {
this.navigatePrevious();
} else if (event.key === 'ArrowDown') {
this.navigateNext();
}
});
},
methods: {
navigateWheel($event) {
if ($event.deltaY > 0) {
this.navigateNext();
} else {
this.navigatePrevious();
}
},
navigateNext() {
if (this.$route.meta.next) {
this.$router.push(this.$route.meta.next);
}
},
navigatePrevious() {
if (this.$route.meta.previous) {
this.$router.push(this.$route.meta.previous);
}
}
}
};
</script>
<style lang="scss">
.ulbricht-app {
.ulbricht-slice__top {
background: var(--primary);
position: absolute;
width: 200%;
z-index: 0;
transition: transform 0.4s, height 0.4s;
height: 250px;
transform: skewY(-3deg);
left: 0;
top: -210px;
&.ulbricht-slice__hello-world {
transition: transform 0.4s, height 0.2s;
top: -25px;
height: 120%;
transform: skewY(15deg);
}
}
.ulbricht-router__fade-enter-active {
span,
p,
h1,
img {
transition: opacity 0.3s;
opacity: 1;
}
}
.ulbricht-router__fade-leave-active {
span,
p,
h1,
img {
transition: opacity 0.3s;
opacity: 0;
}
}
}
</style>
Moreover, one of the components looks like this, they are quite similar with variations in content:
<template>
<div class="ulbricht-app ulbricht-app__hello">
<img class="ulbricht-hello__background" src="../assets/background.png" alt="">
<div class="ulbricht-hello__content">
<h1 class="ulbricht-hello__header">
Hello World, I am Imanuel
</h1>
<p class="ulbricht-hello__text">
What I do is dead simple, I write software, design websites and landscapes,<br/>
let me show you what I am capable of
</p>
<router-link class="ulbricht-chevron" :to="$route.meta.next">
<span class="ulbricht-chevron__button"></span>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
};
</script>
The presence of the NavIndicator component seems to have coincided with the issue arising, but it cannot be confirmed.
<template>
<div class="ulbricht-sidenav">
<router-link :to="$route.meta.previous || ''" class="ulbricht-sidenav__chevron is--up"
:class="{'is--disabled': !$route.meta.previous}"></router-link>
<router-link :to="nav" class="ulbricht-sidenav__dot" :class="{'is--active': $route.name === nav.name}"
:title="nav.meta.title" v-for="nav in navs"></router-link>
<router-link :to="$route.meta.next || ''" class="ulbricht-sidenav__chevron is--down"
:class="{'is--disabled': !$route.meta.next}"></router-link>
</div>
</template>
<script>
import Routes from "../router/Routes";
export default {
name: "NavIndicator",
computed: {
navs() {
return Routes;
}
}
}
</script>
<style lang="scss">
.ulbricht-sidenav {
position: fixed;
right: 1em;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 9999;
}
.ulbricht-sidenav__chevron {
&::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
vertical-align: top;
width: 0.45em;
border-color: var(--primary);
margin-right: 0.3em;
}
&.is--disabled {
&::before {
border-color: var(--primary-grey);
}
}
&.is--up {
&::before {
transform: rotate(-45deg);
top: 0.5em;
}
}
&.is--down {
&::before {
top: 0;
transform: rotate(135deg);
}
}
}
.ulbricht-sidenav__dot {
border-radius: 50%;
width: 1em;
height: 1em;
border: 0.2em solid var(--primary-opaque-0\.5);
margin-top: 0.25em;
margin-bottom: 0.25em;
transition: border 0.3s, background 0.3s;
&.is--active {
background: var(--primary);
}
&:hover {
border: 0.2em solid var(--primary-opaque-0\.7);
background: var(--primary);
}
}
</style>
Despite removing this component, no change in behavior was observed.
For further investigation, here is the Github Link to access all of the source code should there be any relevant details that I might have overlooked.
https://github.com/DerKnerd/imanuel.ulbricht.codes/tree/98272361549617191bb6d6f5d88ad88c94cbdcfe