Gridsome Vue - анимация между маршрутами

Ищу решение сделать анимацию между маршрутами в сетке. Я хотел бы создать оверлей полной ширины и высоты с анимацией слева направо. Когда оверлей установлен на полную ширину, он должен заменить контент в слоте.

То, что я пытался сделать, это

    <div class="overlay" :class="{ 'overlay--open': overlayOpen }"></div>
    <transition
        appear
        v-on:before-appear="beforeAppear"
        v-on:appear="appear"
        v-on:after-appear="afterAppear"
    >
        <main>
            <slot/>
        </main>
    </transition>

и в методах

methods: {
    beforeAppear: function (el) {
        this.overlayOpen = true
    }
}

стиль

.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #0c0c0c;
  z-index: 99999;
  transition: all 500ms;
  transform-origin: left;
  transform: scaleX(0);

&--open{
    animation: open 1s;
}


@keyframes open {
0% {
    transform: scaleX(0);
}
50% {
    transform: scaleX(1);
}
100% {
    transform: scaleX(0);
}

Это почти сработало, но я не думаю, что это хорошая практика для смены маршрута. Если у вас есть идеи, как это сделать, я был бы очень признателен. Спасибо


javascript vue.js sass gridsome
person TheZahron    schedule 05.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Добро пожаловать в StackOverflow!

Это не работает, потому что значения, которые вы пытаетесь использовать для <transition>, не существуют. Переходы по умолчанию не имеют хука before-appear и потребуют изменения элемента <transition>, чтобы он имел этот элемент.

Вместо этого вы хотите использовать <transition name="open" appear> и ссылаться на классы css из:

.open-enter-active {
  transition: transform 1s;
}

.open-enter {
  transform: scaleX(0);
}

Вы также можете удалить свой div.overlay и метод. Приведенный выше CSS должен направить вас на путь к тому, что вы хотите, но это не совсем тот эффект, которого вы хотите.

Вы также можете узнать больше о переходах Vue здесь, где описаны классы CSS, которые вы можете использовать, если вам нужен больший контроль, чем просто -enter и -enter-active (в этом случае вам нужно удалить appear из перехода).

Надеюсь это поможет!

person vanblart    schedule 06.07.2020