Vuetify - закрывающий переход наложения текста с каруселью - PullRequest
Новая
       6

Vuetify - закрывающий переход наложения текста с каруселью

0 голосов
/ 18 июня 2020

Привет всем! Меня зовут Джей, я новичок в веб-дизайне и использую Vuetify для своего первого веб-проекта.

Прямо сейчас у меня есть настройка карусели и некоторый оверлейный текст, помещенный в центр каждого элемента карусели. Каждый раз, когда вы нажимаете кнопку со стрелкой (следующее изображение / предыдущее изображение), текст на следующем слайде будет отображаться с плавным переходом.

Я уже сделал часть постепенного появления (хотя не уверен, что делаю это правильно). У меня есть плавный переход css, и я просто назначаю css моему тексту:

Код : 

<v-carousel
dark
hide-delimiter-background
height = "600"
>
    <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
    eager
    reverse-transition="slide-fade"
    transition="slide-fade"
    >
        <v-container fill-height>
            <v-row
            class="white--text mx-auto"
            >
                <v-col
                class="white--text text-center"
                >
                    <span
                    :class="[$vuetify.breakpoint.smAndDown ? 'display-2' : 'display-3']"
                    >

                    <p class = "animated fadeInUp">Animation line 1</p> // The fade-in transition
                    <p class = "animated fadeInUp">Animation line 2</p> // The fade-in transition

                    </span>
                </v-col>
            </v-row>
        </v-container>
    </v-carousel-item>
</v-carousel>

CSS : 

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

Мои цели здесь: :

Создавать плавный переход для наложенного текста . Когда пользователь щелкает кнопку со стрелкой, чтобы go перейти к следующему / предыдущему изображению, весь текст в центре исчезнет в виде c.

Есть две проблемы, которые я вижу здесь .

Первый , как запустить переход затухания или это вообще возможно?

Второй , как остановить переход карусели к следующему / предыдущему изображению до того, как переход с постепенным исчезновением текста будет завершен (я предполагаю некоторую задержку)?

Вот живая демонстрация дизайна, который я хочу воссоздать, вы можете увидеть карусель прямо под панелью навигации: https://baker.qodeinteractive.com/

Я не знаю, где я могу Начни заниматься этим, это сводит меня с ума! Вчера я также столкнулся с переходными классами в Vue, но я не уверен, что это правильный путь к go. Если у вас есть опыт работы с подобными дизайнами, подобными этому в прошлом, или если вы знаете, как воссоздать этот дизайн, я был бы признателен, если бы вы могли научить меня или дать мне несколько подсказок!

Большое спасибо за ваше время читать мой пост, берегитесь!

...