Vue.js 修复了在vuejs中使用转换时屏幕上的元素跳转问题

在vue中使用管线之间的过渡时，似乎固定或绝对元素仅在过渡完成后移动到其位置，从而导致动画后的跳跃。这可能是一个错误吗

下面是一个代码笔示例：

HTML:

---

我知道这是一个老问题，但我遇到了相同/类似的问题

这为我解决了这个问题：

<template>
  <transition name="fade">
    <slot />
  </transition>
</template>

<style>
  .fade-enter-active, .fade-leave-active {
      width: inherit;

      transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to {
      opacity: 0;
  }
</style>

。淡入激活状态。淡入保持激活状态{
宽度：继承；
转变：不透明度。5s；
}
.淡入淡出淡出淡出{
不透明度：0；
}

我也有同样的问题。你找到解决方案了吗？翻转动画也有同样的问题。

const HomePage = {
  name: 'HomePage',
  template: '#home-template'
}

const ContactPage = {
  name: 'ContactPage',
  template: '#contact-template'
}

const NotFoundPage = {
  name: 'NotFoundPage',
  template: '#404-template'
}

const routes = [
  { path: '/', component: HomePage },
  { path: '/contact', component: ContactPage },
  { path: '*', component: NotFoundPage },
]

const router = new VueRouter({
  base: '/rugor/debug/VKgoRK/', // codepen specific base
  routes
})

new Vue({
  router,
  template: '#root-template'
}).$mount('#app')

<template>
  <transition name="fade">
    <slot />
  </transition>
</template>

<style>
  .fade-enter-active, .fade-leave-active {
      width: inherit;

      transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to {
      opacity: 0;
  }
</style>