如何有条件地包含内容而不出现不和谐的动画？

Question

在我的 Vue.js 应用程序中，我有这样的结构：

<template>
    <Base>
        <RouterView/>
    </Base>
</template>

Base

看起来像：

<template>
    <Header :key="JSON.stringify(route.meta)" class="z-20 bg-white"></Header>
    <div class="flex flex-col h-screen">
        <div class="grow pt-20">
            <slot>
            </slot>
        </div>
        <Footer :key="JSON.stringify(route.meta)"></Footer>
    </div>
</template>

在我的

Header

中，我希望根据路由器所在的路径隐藏某些链接。

我可以这样做：

<a v-if="route.path === '/pricing'">Home</a>

网页第一次绘制时出现的问题，即使在

/pricing

上，“主页”链接也不可见，直到它在页面中的其他项目周围移动时显得相当刺耳。

有没有办法在第一次绘制时就可以完成这项工作？或者以某种方式让事情看起来不那么糟糕？

我知道如何有条件地包含元素，所以我希望这个问题不会通过链接到其中一个来结束，我只是想以更好的方式有条件地包含内容。

Answer 1

为了避免在 Vue 应用程序中有条件地显示内容时出现不和谐的效果，请考虑对经常更改可见性的元素使用

v-show

，因为这会将它们保留在 DOM 中，但只是切换其可见性。这可以防止意外的布局变化。此外，您可以使用 CSS 添加微妙的过渡（例如淡入淡出），以使元素的出现和消失更加平滑。例如：

<a v-show="route.path === '/pricing'" class="smooth-transition">Home</a>

在你的 CSS 中：

.smooth-transition {
  transition: opacity 0.5s ease;
}

这种方法可确保您的内容更改不那么突然并且视觉上更令人愉悦。