vue-router 过渡突然停止工作答案

【问题标题】：vue-router transition suddenly stopped workingvue-router 过渡突然停止工作
【发布时间】：2018-09-18 01:45:12
【问题描述】：

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

这就是它现在“工作”的方式：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 链接，如果我可能忘记了一些相关的东西，你可以调查所有源代码。

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

【问题讨论】：

您应该发布问题的相关来源。
寻求调试帮助的问题（“为什么这段代码不起作用？”） 必须包括所需的行为、特定问题或错误以及重现它所需的最短代码在问题本身。没有明确问题陈述的问题对其他读者没有用处。见：minimal reproducible example
好的，问题是，我不知道代码的哪一部分是问题的根源。所需的行为相当简单，它应该具有动画效果。然后我应该在这里发布整个代码吗？我试图解决它大约 2 小时，但不知道问题出在哪里。
问题是，Stack Overflow 不是个人调试服务。问题也应该对其他人有用，如果没有清晰完整的描述，它对任何人都没有帮助。
@EmileBergeron 我添加了代码

标签： javascript vue.js vue-router

【解决方案1】：

之间有注释

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

和

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

在您的网站副本上不起作用。那里正在渲染/删除某些东西。

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

【讨论】：