Vue.js 路由器过渡渐变间隙

Question

我在 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 有几个示例。我需要复制第三个按钮示例，但我缺少必须使用的模式。

有什么建议吗？

Answer 1

实际上，因为您不需要任何特殊行为并且实际上希望两个转换同时发生，所以您根本不应该使用 mode。只需删除它，它就会像您描述的那样工作。来自您粘贴的文档 link：

Simultaneous entering and leaving transitions aren’t always desirable though, so Vue offers some alternative transition modes

in-out: New element transitions in first, then when complete, the current element transitions out.

out-in: Current element transitions out first, then when complete, the new element transitions in.

Answer 2

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>

Answer 3

过渡元素的主要问题是您希望它们同时在 DOM 中占据相同的 space（即使在视觉上，一进一出 - 这只是通过 transforms 完成，但两个元素需要在 DOM).

中占用相同的 space

因此您需要提供其中之一 position:absolute 并使用 CSS 正确调整大小和位置，以匹配没有 position:absolute 时的确切位置和大小（这是它在不进行过渡时的内容）。

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

在上面的例子中，我给出了后续的<div>（进入的）

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

如果您选择将所有 <router-view> 包装到带有 position:relative 的通用包装器元素中，top 需要是 0（在示例中 60px占了<nav>的身高）。

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

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

height:100vh 中的一个 using a flexbox container，其中顶部和底部元素不会增长，而中间元素会增长。当中间元素太大时，它会变成可滚动的。
another one 我玩转场效果和 Bootstrap Vue.

Vue.js 路由器过渡渐变间隙

Vue.js router transition fade gap

animate.css

vue.js

vue-router