如何防止 NuxtJS 应用程序中页面加载时的 Vuejs 转换

Question

有一个简单的问题。

我有一个 nuxt 布局文件，它有一个需要通过单击按钮隐藏的边栏。

按钮和一切正常，但每次加载页面时它都会转换。

这是有问题的代码：来自模板和样式部分：

<transition name="sidebar">
    <Sidebar v-show="showSidebar"/>                       
</transition>

.sidebar-leave-active,
.sidebar-enter-active {
  transition: .3s;
}
.sidebar-enter {
  transform: translate(-100%, 0);
}
.sidebar-leave-to {
  transform: translate(-100%, 0);
}

Answer 1

最终在 t运行站点中添加了一个 javascript 进入前挂钩，在允许 t运行站点之前检查安装的挂钩是否运行。

<transition v-on:before-enter="beforeEnter" :name="(allowTransition) ? 'sidebar' : ''">
    <Sidebar v-show="showSidebar"/>                       
</transition>

data() {
    return {
      showSidebar: true, 
      isMounted: false,
      allowTransition: false    
    }    
  },
  methods : {
    beforeEnter(){      
      this.allowTransition = (this.isMounted) ? this.isMounted : !this.isMounted;
    }
  },
  mounted(){
    this.isMounted = true;
  }

如何防止 NuxtJS 应用程序中页面加载时的 Vuejs 转换

How to Prevent Vuejs transition on Page Load in NuxtJS app

css-transitions

vue.js

nuxt.js