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

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

因此，您需要给它们position:absolute中的一个，并使用CSS正确调整其大小和位置，以匹配没有position:absolute时的确切位置和大小（这将是它的实际效果）在不进行翻译时可以使用。

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

在上面的示例中，我给出了后续的<div>（输入的内容）

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

如果您选择使用<router-view>将所有position:relative包装到一个公共包装元素中，则top必须是0（在示例{{1}中}占60px的高度）。

注意：和是，正如其他人已经指出的那样，您不需要<nav>。但这仍然给您带来定位问题。

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

mode="in-out"中的一个using a flexbox container，顶部和底部元素不增长，而中间元素则增长。当中间元素太大时，它将变为可滚动。
another one，我在其中使用了转场效果和Bootstrap Vue。

Answer 2

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

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



输入输出：新元素先输入，然后完成，当前元素输出。



出入：当前元素先移出，然后完成时，新元素移入。

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

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

3 个答案: