Vue.js переход маршрутизатора исчезает разрыв - PullRequest
Новая
       12

Vue.js переход маршрутизатора исчезает разрыв

0 голосов
/ 02 июня 2019

Я использую потрясающий переход к страницам слайд-роутера в 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: Режимы перехода Есть несколько примеров. Мне нужно повторить пример третьей кнопки, но мне не хватает режима, который я должен использовать.

Есть предложения?

Ответы [ 3 ]

1 голос
/ 02 июня 2019

Основная проблема с вашими переходными элементами заключается в том, что вы хотите, чтобы они занимали одно и то же пространство в DOM в одно и то же время (даже если визуально один входит и один существует - это делается только через transforms, но два элемента нуждаются в занимать такое же место в DOM).

Поэтому вам нужно дать один из них position:absolute и использовать CSS для его размера и правильного позиционирования, чтобы соответствовать точному положению и размеру, которые он будет иметь, если у него нет position:absolute (то есть то, что он будет иметь, когда не будет trasitioning). ).

Вот рабочий пример . Обратите внимание, что вашим может потребоваться применить разные стили к другому элементу.
Поскольку вы не предоставили минимальный воспроизводимый пример с собственной разметкой, узнать это невозможно.

В приведенном выше примере я дал следующий <div> (входящий) 

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

Если вы решите обернуть все свои <router-view> в общий элемент-обертку с position:relative, top должно быть 0 (в примере 60px учитывает высоту <nav> ).

Примечание: и да , как уже отмечали другие, вам не нужно mode="in-out". Но это все еще оставляет вас с проблемой позиционирования.

Редактировать: Я играл еще с двумя примерами.

  • one с использованием контейнера flexbox из height:100vh, где верхний и нижний элементы не растут, а средний растет. Когда средний элемент слишком большой, он становится прокручиваемым.
  • еще один , где я играл с эффектами перехода и Bootstrap Vue.
0 голосов
/ 02 июня 2019

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>
0 голосов
/ 02 июня 2019

На самом деле, поскольку вам не нужно никакого особого поведения и вы хотите, чтобы оба перехода происходили одновременно, вы не должны использовать mode вообще.Просто удалите его, и оно должно работать, как вы описали.Из ссылки на документы, которую вы вставили:

Одновременный вход и выход из переходов не всегда желательны, поэтому Vue предлагает несколько альтернативных режимов перехода

  • in-out: Сначала происходит переход нового элемента, затем, когда он завершен, происходит переход текущего элемента.

  • out-in: Сначала происходит переход текущего элемента, а затем, после завершения, новый элемент переходит в.

...