Vue.js 路由器过渡淡入淡出间隙答案

【问题标题】：Vue.js router transition fade gapVue.js 路由器过渡淡入淡出间隙
【发布时间】：2019-10-18 05:36:21
【问题描述】：

我正在 vue.js 中使用惊人的过渡来滑动路由器页面

<template>
  <div>
    <header-comp></header-comp>
    <transition
            name="custom-classes-transition"
            mode="out-in"
            enter-active-class="animated slideInLeft"
            leave-active-class="animated slideOutRight"
    >
        <router-view></router-view>
    </transition>
    <footer-comp></footer-comp>
  </div>
</template>

<style>
    @import 'https://cdn.jsdelivr.net/npm/animate.css@3.5.1';
</style>

它工作得非常好和流畅，但是......当第一个页面完全消失时，新的页面进入。这造成了过渡之间的差距。

在 Vue 手册：Transition-Modes 中有几个例子。我需要复制第三个按钮示例，但我缺少必须使用的模式。

有什么建议吗？

【问题讨论】：

标签： vue.js vue-router animate.css

【解决方案1】：

过渡元素的主要问题是您希望它们同时占据 DOM 中的相同空间（即使从视觉上看，一个进入一个存在 - 这只能通过 transforms 完成，但两个元素需要在 DOM 中占据相同的空间）。

因此，您需要给其中一个 position:absolute 并使用 CSS 来正确调整其大小和位置，以匹配没有 position:absolute 时它所具有的确切位置和大小（这是它在不转换时所具有的)。

这是working example。请注意，您可能需要将不同的样式应用于不同的元素。
由于您没有使用自己的标记提供最小的、可重现的示例，因此无法知道。

在上面的例子中，我给了后面的<div>（输入的那个）

position: absolute;
width: 100%;
top: 60px;
left: 0;

如果您选择使用position:relative 将所有<router-view>s 包装到一个公共包装元素中，则top 需要为0（在示例中60px 是<nav> 的高度)。

注意： 并且是的，正如其他人已经指出的那样，您不需要mode="in-out"。但这仍然会给您留下定位问题。

编辑：我又玩了两个例子。

using a flexbox container 中的一个 height:100vh，其中顶部和底部元素不会增长，而中间元素会增长。当中间元素太大时，它变成可滚动的。
another one 在那里我使用了过渡效果和 Bootstrap Vue。

【讨论】：

谢谢安德烈。它工作得很好，但我必须调整将其固定到底部的页脚。我尝试 "style="position: relative; bottom: 0;" 在页脚 div 但它不起作用。我使用模式进出只是因为它有帮助而不是绝对位置但是......它造成了差距
好吧，如果你想在放置在其他两个可变元素之间的元素内进行过渡，你需要使用height: 100vh 的弹性盒容器。 Demo here.
感谢您抽出宝贵时间 Andrei，您的两个示例都很棒！非常感谢！

【解决方案2】：

实际上，由于您不需要任何特殊行为并且实际上希望两个转换同时发生，因此您根本不应该使用mode。只需将其删除，它应该可以按照您的描述工作。从您粘贴的文档链接：

虽然并不总是需要同时进入和离开过渡，因此 Vue 提供了一些替代过渡模式

in-out：新元素先过渡进来，完成后，当前元素过渡出去。

out-in：当前元素先转出，完成后，新元素转入。

【讨论】：

如果我删除模式，我只有转换 OUT 然后第 2 页没有 IN 效果。不确定在路由器上使用转换是否有问题

【解决方案3】：

mode="in-out"：新元素先过渡，完成后，当前元素过渡出去。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    showOn: true
  },
  methods: {
    handleClick() {
      console.log(this.message);
    }
  }
})

.slide-fade-enter-active {
  transition: all .3s ease;
  position: absolute;
  left: 0;
  top: 0;
}
.slide-fade-leave-active {
  position: absolute;
  left: 0;
  top: 0;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

#app {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<body>
  <div id="app">
    <transition  name="slide-fade" mode="in-out">
      <button v-if="showOn"
        key="on"
      type="button"
      @click="showOn=false">On</button>
      <button v-else type="button"
      key="off"
      @click="showOn=true">Off</button>
    </transition>
  </div>
</body>

【讨论】：

非常感谢，大廖。这消除了差距，但在幻灯片上有一点闪烁，但这是一个开始点。谢谢