vue.js - 在 vuejs 中使用转换时固定元素在屏幕上跳转

Question

在 vue 中使用路由之间的过渡时，似乎固定或绝对元素仅在过渡完成后才会移动到它们的位置，从而导致动画后的跳转。这可能是一个错误？

这是一个codepen示例:
https://codepen.io/anon/pen/ebyOYx

HTML:

<div id="app"></div>

<template id="root-template">
  <div class="routes">
      <nav>
        <router-link to="/" exact>Home</router-link>
        <router-link to="/contact">Contact</router-link>
      </nav>
      <transition name="slide-left" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
</template>

<template id="home-template">
  <div class="page">
      <h1>Home Page</h1>
      Go to the Contact page and notice the fixed toolbar jumping after transition
  </div>
</template>

<template id="contact-template">
  <div class="page">
      <h1>Contact Page</h1>
    <div class="toolbar">
      Toolbar
    </div>
  </div>
</template>

<template id="404-template">
  <div class="page">
      <h1>404 Not Found</h1>
  </div>
</template>

java 脚本:

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')

Answer 1

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

这为我修复了它:

<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>