Полноэкранный div, скользящий от вверх в vue2JS - PullRequest
Новая
       15

Полноэкранный div, скользящий от вверх в vue2JS

0 голосов
/ 24 сентября 2018

Я пытаюсь создать div шириной 100% и высотой 100vh, который бы скользил от экрана сверху вниз к странице.При 70% анимации я бы хотел сделать его внизу, затем на 90% переместить его на 30px вверх и на 100% снова сделать его внизу, чтобы он выглядел так, как будто он скользит вверх, а затем отскакивает внизу.

Я хочу, чтобы это произошло после щелчка по некоторому элементу DOM внука, поэтому в основном я буду использовать eventBus, и мой «скользящий div» будет в корневом компоненте (app.vue), а в дочернем элементе я выберу:

showObserved() {
     eventBus.$emit('showObserved');
}

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

eventBus.$on('showObserved', async() => {
    this.showObserved = true;
});
eventBus.$on('hideObserved', async() => {
    this.showObserved = false;
});

и основываясь на этом логическом значении яотображение моего скользящего элемента div с помощью директивы v-if: 

<transition name="slide-up" mode="out-in">
    <observed-offer v-if="showObserved"></observed-offer>
</transition>

и вот, наконец, я использую встроенный компонент transition vue, чтобы сделать его скользящим, и это мои стили, которые должны дать эффект, который я объяснилв первом параграфе: 

/* slide from up to down */
.slide-up-leave-active {
    animation: slide-out-up .4s linear;
}

.slide-up-enter-active {
    animation: slide-in-up .4s linear forwards;
}

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

.slide-up-leave {
    opacity: 1;
    transform: translateY(-100%);
}

@keyframes slide-out-up {
    0% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slide-in-up {
    0% {
        transform: translateY(-100%);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}

и это стиль моего скользящего div: 

.observed {
    width: 100%;
    height: 100vh;
    z-index: 999999999;
    overflow: hidden;
    background-color: white;
}

Но это не работает, потому что он мгновенно делает всю страницу белой и слайд-контентдив,Я совершенно уверен, что я просто сделал неправильные стили CSS, я пробовал разные другие стили, и это не сработало.Также, возможно, это как-то связано с height: 100vh.

Я добавляю демо-репозиторий .В этой демонстрации скольжение почти работает, но скольжение не работает вообще.Установка этого проекта проста, просто клонируйте его, затем cd path/to/project, затем npm install && npm run dev или что-то похожее в зависимости от ОС.

В демоверсии он также не отображает всю страницу, но оставляет место для кнопки, как вы увидите, еслиВы клонируете его.

Ну, на самом деле, я теперь исправляю переходы в демо-репо, единственная проблема заключается в том, что он не скрывает / не закрывает всю страницу, но оставляет место для корневого содержимого.Снова потяните репо, чтобы увидеть это.

1 Ответ

0 голосов
/ 24 сентября 2018

Проблема заключалась в том, что я использовал неправильные стили перехода и у меня не было фиксированной позиции с top: 0 left: 0 на моем компоненте панели.После исправления это работает правильно, как вы можете проверить в демо-репозитории.

Извините, что потратил время на проблему, которую я исправил сам, но было гораздо сложнее устранить неисправности в большом проекте.Когда я создал это демо-репо, это стало так просто.

...