Javascript Vue.js转换不'；不适用于第一页加载

我有一个导航栏，带有两个组件之间切换的链接。
我有一个用于切换的淡入动画，但它在您第一次打开页面时不会运行（它仅在您使用导航栏链接切换组件时运行）。
有没有办法克服这个问题

另外，组件只是

Home

和

About

HTML:

CSS（动画）：

---

视图转换在页面加载时不会自动工作，因为加载内容时尚未初始化

你必须找到另一种方法来触发转换。我可以想出几个选择

默认情况下，使用数据道具隐藏组件，然后在

已安装的

生命周期中将其切换为true。这将触发转换

data（）{
返回{
节目：假
}
},
安装的（）{
this.show=true；//可能需要它。$nextTick
}

使用常规css转换

与上述方法类似，为父元素提供一个带有样式的类

opacity:0；
过渡：不透明度0.5s缓进缓出；

然后在

mount

上添加一个类，将不透明度更改为1

只需在转换包装中添加“出现”属性。
您将需要css类用于动画或过渡到。
例如：

那太好了：）你所说的“并且你将需要你的css类来进行动画或转换”是什么意思？这意味着你将展示的转换类型。例如，您希望执行从0到1的不透明度转换。如果过渡开始，不透明度为零，然后，如果设置的过渡时间结束，不透明度将自动设置为1。这里的例子是：不透明度。淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出？

<div id="app">
  <transition name="view">
      <router-view/>
  </transition>
</div>

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: { name: 'home-route' }
    },
    {
      path: '/home',
      name: 'home-route',
      component: HomeComponent
    },
    {
      path: '/about',
      name: 'about-route',
      component: AboutComponent
    }
  ]
})

.view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}

.view-enter-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    transition-delay: 0.5s;
}

.view-enter, .view-leave-to {
    opacity: 0;
}

.view-enter-to, .view-leave {
    opacity: 1;
}

<transition name="fade" appear></transition>