vue-router transition suddenly stopped working

Question

I am working on my personal website currently. For the frontend I am using Vue.js with vue-router. Until today the transition worked fine, you can see here: https://imanuel.ulbricht.codes/ (you need to scroll down or use the arrow key down). But after some changes that I cannot really find it stopped working.

This is how it "works" now: https://imanuel-not-working.ulbricht.codes/. I really have no idea what I changed, that might affect this change in behavior, maybe someone has an idea.

Side note: The published code has sourcemaps enabled so you should see the complete Vue.js source code.

Another point, the code should animate the page transition, that doesn't happen currently. After 2h searching I couldn't find the root of the problem, if anyone could give me a hint what code might be the cause I will add it to the question.

This is the code, that might cause the issue:

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>

And one of the components, they basically all look the same just the content varies.

<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>

And the NavIndicator component, I think after adding this component it stopped working, but I am not sure.

<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>

Removing this component, however, didn't have an effect.

As addition, here is the Github Link, so you can investigate all of the source code if I might have forgotten something, that might be relevant.

https://github.com/DerKnerd/imanuel.ulbricht.codes/tree/98272361549617191bb6d6f5d88ad88c94cbdcfe

Answer 1

There is a <!-- --> comment between

<div class="ulbricht-slice__top ulbricht-slice__hello-world"></div>

and

<div class="ulbricht-app ulbricht-app__hello">

on the copy of your site that is not working. Something is being rendered/removed there.

It may be causing a CSS selector to be applied incorrectly.