vue-router transition 突然停止工作

Question

我目前正在我的个人网站上工作。对于前端，我使用 Vue.js 和 vue-router。直到今天过渡工作正常，你可以在这里看到：https://imanuel.ulbricht.codes/（你需要向下滚动或使用向下箭头键）。但是经过一些我无法真正找到的更改后它停止工作了。

现在 "works" 是这样的：https://imanuel-not-working.ulbricht.codes/。我真的不知道我改变了什么，这可能会影响这种行为改变，也许有人有想法。

旁注：已发布的代码启用了源映射，因此您应该看到完整的 Vue.js 源代码。

还有一点，代码应该为页面转换设置动画，目前还没有发生。经过 2 小时的搜索，我找不到问题的根源，如果有人能给我提示，我会把它添加到问题中的原因可能是什么代码。

这是可能导致问题的代码：

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>

其中一个组件，它们基本上看起来都一样，只是内容不同。

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

还有 NavIndicator 组件，我想添加这个组件后它就停止工作了，但我不确定。

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

但是，删除此组件没有任何效果。

此外，这里是 Github Link，如果我忘记了一些可能相关的内容，您可以查看所有源代码。

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

Answer 1

之间有条评论

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

和

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

您网站的副本无法正常工作。 rendered/removed 那里有东西。

这可能导致 CSS 选择器应用不正确。

vue-router transition 突然停止工作

vue-router transition suddenly stopped working

javascript

vue.js

vue-router