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

【问题标题】：Fixed elements jump on screen when using transitions in vuejs修复了在 vuejs 中使用转换时元素在屏幕上跳转的问题
【发布时间】：2019-05-28 14:51:56
【问题描述】：

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

这是一个代码笔示例： 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>

JAVASCRIPT：

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

【问题讨论】：

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

标签： vue.js routes transition

【解决方案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>

【讨论】：