Vue.js 转换不适用于页面首次加载

Question

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

PS 组件只是<h1>Home</h1>和<h1>About</h1>。

HTML：

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

JS（路由器）：

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
    }
  ]
})

CSS（动画）：

.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;
}

Answer 1

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

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

Answer 2

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

您必须找到另一种触发过渡的方法。我能想到几个选项。

1. 默认情况下使用 data prop 隐藏组件，然后在mounted生命周期中将其切换为 true。这应该会触发转换。

<div v-if="show"></div>

data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true; // might need this.$nextTick
  }

2. 使用常规的 css 过渡。

和上面的做法类似，给父元素一个带样式的类

opacity: 0;
transition: opacity 0.5s ease-in-out;

然后mount添加一个类以将不透明度更改为 1。