Question

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

这是它的工作原理＆＃34;现在：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

Answer 1

之间有条评论

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

和

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

在您网站的副本上无效。那里正在渲染/移除某些东西。

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

vue-router转换突然停止工作

1 个答案: