Vue перехода прыгать вместо слайда - PullRequest
Новая
       21

Vue перехода прыгать вместо слайда

0 голосов
/ 03 октября 2018

Я пытаюсь создать анимацию слайдов, которая бы выглядела следующим образом:

После нажатия кнопки div, равной 100% ширине и высоте, выскользните справа за пределы экрана и наведите на всю страницу.После нажатия кнопки внутри этого нового элемента div он сдвигается вправо за пределы экрана.

Итак, первый шаг - сглаживание показа div наложения справа вне экрана, и это работает правильно. Второй шаг - сглаживание скрытия наложения div влево.вне экрана, который не работает.

Демонстрация в реальном времени: http://two -house.com /

Так что после нажатия кнопки поиска на главной странице это должно приятнопоказать наложение div справа, что является первым шагом.

А затем, когда вы нажимаете кнопку в левом верхнем углу «назад», он должен скрыть, что является вторым шагом, но не скользит: (

Myvue переход для этого компонента: 

<transition name="slide" mode="out-in">
    <search-panel v-show="!searchPanelCollapsed"></search-panel>
</transition>

.slide-leave-active {
    animation: slide-out .4s linear forwards;
}

@keyframes slide-out {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

Что странно, и его трудно исправить, так это то, что он работает правильно на локальном хосте после выполнения npm run dev, но не очень хорошо скрывается на сервере ..

...