Как сделать слайдер vue

Обновлено: 08.07.2024

Vue даёт возможность самым разным образом анимировать переходы при обновлении объектов DOM, а также при их добавлении и удалении. Его инструменты дают возможность:

автоматически применять CSS-классы для анимаций и переходов
интегрировать сторонние библиотеки CSS-анимаций, такие как Animate.css
использовать JavaScript для работы с DOM напрямую в хуках переходов
интегрировать сторонние библиотеки JavaScript-анимаций, такие как Velocity.js

На этой странице мы рассмотрим только анимации появления и исчезновения элементов, а также анимации списков. В следующем разделе вы можете найти информацию об анимировании переходов между состояниями.

Анимирование одиночного элемента/компонента

Vue располагает компонентом-обёрткой transition , позволяющим анимировать появление и исчезновение элемента или компонента в следующих случаях:

Условная отрисовка (используя v-if )
Условное отображение (используя v-show )
Динамические компоненты
Корневые элементы компонентов

Рассмотрим в действии простой пример:

Когда элемент, завёрнутый в компонент transition , вставляется или удаляется, происходят следующие действия:

Vue автоматически узнаёт, применены ли к целевому элементу CSS-переходы или анимации. Если да, соответствующие CSS-классы будут должным образом обновлены в нужные моменты времени.

Если для компонента указаны хуки JavaScript, они будут вызваны в соответствующие моменты времени.

Если не обнаружено ни CSS-переходов и анимаций, ни JavaScript-хуков, операции DOM для вставки или удаления элемента будут выполнены непосредственно в следующем анимационном фрейме (важно: речь идёт об анимационном фрейме браузера, отличном от используемой во Vue концепции nextTick ).

Классы переходов

Есть шесть классов, применяющихся в анимациях появления и исчезновения элементов:

v-enter : Означает начало анимации появления элемента. Этот класс добавляется перед вставкой элемента, а удаляется в следующем фрейме после вставки.

v-enter-active : Означает, что анимация появления элемента активна. Этот класс остаётся в течение всей анимации. Он добавляется перед вставкой элемента, а удаляется как только переход или анимация прекратились. Используйте его для установки длительности, задержки и плавности (easing curve) анимации появления.

v-enter-to : Доступно только в версиях 2.1.8+. Означает, что анимация появления элемента завершается. Класс добавляется в следующем фрейме после вставки элемента (тогда же, когда будет удалён v-enter ), удаляется после завершения перехода или анимации.

v-leave : Означает начало анимации исчезновения элемента. Класс добавляется как только началась анимация исчезновения, а удаляется в следующем фрейме после этого.

v-leave-active : Означает, что анимация исчезновения элемента активна. Этот класс остаётся в течение всей анимации. Он добавляется как только начинается анимация исчезновения, а удаляется как только переход или анимация прекратились. Используйте его для установки длительности, задержки и плавности (easing curve) анимации исчезновения.

v-leave-to : Доступно только в версиях 2.1.8+. Означает, что анимация исчезновения элемента завершается. Класс добавляется в следующем фрейме после начала анимации исчезновения (тогда же, когда будет удалён v-leave ), а удаляется после завершения перехода или анимации.

Для каждого из этих классов указывается префикс, соответствующий имени перехода. Префикс v- применяется по умолчанию, если элемент используется без указания параметра name . Например, для вместо класса v-enter будет применяться my-transition-enter .

v-enter-active и v-leave-active дают возможность указать различные анимационные эффекты для переходов появления и исчезновения элемента. Пример их использования будет приведён ниже.

CSS-переходы

Одни из самых распространённых типов анимации — это CSS-переходы. Вот небольшой пример:

CSS-анимации

CSS-анимации применяются таким же образом, как и CSS-переходы, с одним отличием: v-enter удаляется не сразу же после вставки элемента, а только при наступлении события animationend .

В этом примере браузерные CSS-префиксы опущены для краткости:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

Пользовательские классы переходов

Вы также можете использовать пользовательские классы переходов, указывая следующие атрибуты:

enter-class
enter-active-class
enter-to-class (в версии 2.1.8+)
leave-class
leave-active-class
leave-to-class (в версии 2.1.8+)

Таким образом стандартные названия классов будут переопределены, что может быть особенно полезно для комбинирования системы анимированных переходов Vue с возможностями сторонних библиотек CSS-анимаций, таких как Animate.css.

Совместное использование переходов и анимаций

Для того чтобы Vue знал о завершении анимации, ему требуется установка подписчиков на события. В зависимости от используемых правил CSS, таким событием будет либо transitionend , либо animationend . Если вы используете только один из подходов, Vue определит правильный тип автоматически.

Однако, иногда может потребоваться использование обоих подходов на одном элементе. Например, CSS-анимация под управлением Vue при появлении или исчезновении элемента может соседствовать с эффектом CSS-перехода при наведении курсора мыши на элемент. В таких случаях потребуется явное указание типа события, на которое должен будет ориентироваться Vue. Атрибут type может получить значение animation или transition .

Указание длительности перехода

В большинстве случаев Vue может автоматически определить когда переход завершён. По умолчанию Vue дожидается первого события transitionend или animationend на корневом элементе. Тем не менее, это не всегда может быть нужным — например, мы можем иметь хореографическую последовательность переходов, где некоторые внутренние элементы могут иметь задержку перед переходом или более длинный по времени переход, чем у корневого элемента.

В таких случаях вы можете явно указать продолжительность перехода (в миллисекундах) с помощью опции duration на компоненте :

Можно также указать отдельные значения продолжительностей начала и окончания перехода:

JavaScript-хуки

Можно также указывать JavaScript-хуки:

Эти хуки могут применяться как самостоятельно, так и в сочетании с CSS-переходами и анимациями.

Если ваш переход основан только на JavaScript, обязательно вызывайте коллбэки done в хуках enter и leave . Если вы этого не сделаете, хуки будут вызваны синхронно, и переход закончится раньше, чем отработает ваш код.

Лучше явным образом указывать v-bind:css="false" для переходов, основанных только на JavaScript. Это позволит Vue не тратить время на определение параметров CSS. Кроме того, это убережёт нас от случайного взаимовлияния CSS-правил и JS-перехода.

Теперь давайте разберём пример. Возьмём простой JavaScript-переход, использующий Velocity.js:

Переходы при первичной отрисовке

Если вы хотите, чтобы пользователь увидел анимацию перехода и при изначальной отрисовке, добавьте атрибут appear :

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

То же справедливо и для хуков:

В примере выше, либо атрибут appear , либо хук v-on:appear вызовут появление перехода.

Переходы между элементами

Это сработает, но следует знать о нескольких скользких моментах:

При переключении между элементами, использующими одноимённые теги, нужно указать Vue, что это различные элементы, установив уникальные значения атрибута key . В противном случае компилятор Vue из соображений эффективности только поменяет содержимое элемента. Несмотря на отсутствие технической необходимости, считается хорошим тоном всегда указывать атрибут key у множественных тегов в компоненте .

В этом случае вы можете использовать атрибут key для перехода между разными состояниями элемента. Вместо использования v-if и v-else , можно переписать пример выше вот так:

В действительности можно не ограничиваться двумя вариантами, и организовать переходы между любым количеством элементов, либо многократно используя v-if , либо привязывая единственный элемент к динамическому свойству. Например:

Что можно также записать в таком виде:

Режимы переходов

Однако сохраняется одна проблема. Попробуйте кликнуть на кнопку ниже:

Иногда это поведение подходит, например если оба элемента абсолютно спозиционированы в одном и том же месте:

Таким образом можно также сымитировать анимацию слайдера:

Тем не менее, одновременное сокрытие и появление элементов — это не всегда то, чего хочется. Поэтому Vue предоставляет альтернативные режимы перехода:

in-out : Сначала появляется новый элемент, и только после этого исчезает старый.

out-in : Сначала исчезает старый элемент, и только после этого появляется новый.

Давайте теперь изменим переход для наших on/off кнопок, используя out-in :

Добавив всего лишь один атрибут, мы исправили исходную анимацию перехода, не прибегая к редактированию стилей.

Режим in-out применяется не столь часто, но для достижения некоторых эффектов и он может быть полезен. Давайте попробуем совместить его с ранее рассмотренной анимацией слайдера:

Переходы между компонентами

Переходы между компонентами — ещё проще, нам даже не нужен атрибут key . Всё, что нужно — завернуть динамический компонент в :

Переходы в списках

Мы уже разобрались с переходами для:

Одиночных элементов
Множеств элементов, в случаях когда единовременно не может отображаться более одного элемента из множества

А как насчёт ситуации, когда у нас есть целый список элементов, который мы бы хотели отображать одновременно, например директивой v-for ? В этом случае, мы используем компонент . Прежде чем мы перейдём к примеру, важно отметить несколько важных моментов, касающихся этого компонента:

В отличие от , он создаёт реальный элемент. По умолчанию это , но можно изменить на любой другой, указав атрибут tag . недоступны, так как мы больше не переключаемся туда-сюда между взаимоисключающими элементами.
У каждого элемента внутри всегда обязательно должно быть уникальное значение атрибута key .
CSS-классы переходов будут применяться к внутренним элементам, а не к самой группе/контейнеру.

Анимация вставки и удаления элементов списка

Давайте теперь разберём несложный пример анимации перехода вставки и удаления, использующий те же CSS-классы, что мы рассматривали ранее:

С этим примером есть одна проблема. При добавлении или удалении элемента, окружающие его элементы резко перемещаются, вместо того чтобы плавно перелететь на новые места. Мы исправим это позднее.

Анимация перемещения элементов списка

У компонента припасён ещё один козырь в рукаве. Он способен анимировать не только появление и удаление элементов, но также и их перемещение. Происходит это путём добавления класса v-move , который указывается при изменении позиции элементов. Как и с другими классами, префикс устанавливается в соответствии с указанным значением атрибута name . Аналогично, можно указать класс вручную в атрибуте move-class .

Этим классом удобнее всего указывать продолжительность и тайминги перехода:

Теперь мы можем совместить эту технику с нашим предыдущим примером, чтобы анимировать все возможные изменения нашего списка!

Важно знать, что FLIP-анимации не работают с элементами, для которых установлен режим позиционирования display: inline . Вместо него используйте режим display: inline-block или flex-контейнер.

FLIP-анимации не ограничены одной осью. Многомерные массивы могут быть анимированы столь же просто:

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

Упругая анимация элементов списка

Настраивая JavaScript-переходы через data-атрибуты возможно также организовать упругую анимацию списка:

Повторное использование анимированных переходов

Анимация переходов может быть переиспользована благодаря компонентной системе Vue. Всё, что необходимо сделать — это поместить компонент или в корне компонента, а затем передать в этот компонент потомков.

Пример с использованием компонента со строковым шаблоном:

Особенно хорошо для этих целей подходят функциональные компоненты:

Динамические переходы

Да, даже анимационные переходы во Vue управляются данными! Простейший пример — связывание атрибута name с динамическим свойством.

Может пригодиться, если вы определили CSS-переходы или анимации, используя принятые во Vue соглашения об именовании классов, и просто хотите переключаться между ними.

На самом деле, любой атрибут может быть динамически связан. И речь не только об атрибутах. Поскольку хуки — это просто методы, у них есть доступ ко всем данным в текущем контексте, а значит и JavaScript-анимации могут зависеть от состояния компонента.

Запустить анимацию Остановить анимацию

Наконец, ещё больше возможностей для создания динамических переходов появляется, если создать компоненты, принимающие входные параметры, определяющие природу используемых переходов. Звучит избито, но всё равно — здесь всё ограничено только вашим воображением.

Я хочу добавить слайдер. Итак, я хочу, чтобы ползунок был таким:

Как я могу это сделать?

Ответы 2

Для достижения этого результата вы должны использовать некоторые свойства и стили methods , computed , здесь рабочий пример и демонстрация:

поддерживает одновременный показ только одного слайда. Однако вы можете размещать карточки внутри слайда. Вы можете разместить 1, 2 или более карточек на слайд.

Другие вопросы по теме

Vuejs - неизвестный тип локального действия: addproducttocart, глобальный тип: cart / addproducttocart

Как создать веб-сайт - создать веб-сайт за 15 минут - невероятно!

Мой сценарий такой:

Я хочу добавить слайдер. Итак, я хочу, чтобы слайдер был таким:

Как я могу это сделать?

Для достижения этого результата вам нужно использовать methods , computed свойства и стили, вот рабочий пример и демонстрация:

поддерживает отображение только одного слайда за раз. Однако вы можете размещать карточки внутри слайда. Вы можете разместить 1, 2 или более карточек на слайде.

VueJS предоставляет много способов применения перехода к HTML элементам, когда они добавляются или обновляются в DOM. VueJS имеет вcтроенный компонент перехода, который нужно обернуть вокруг элемента. Синтаксис

Давайте рассмотрим пример работы переходов. Пример

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Используя кнопку с именем clickme, мы можем изменять значение переменной show с true на false ложь или наоборот. Тэг p отображает текстовый элемент только тогда, когда переменная имеет значение true. Мы обернули тэг p в элемент перехода, следующим образом.

Переход имеет название fade. VueJS предлагает некоторые стандартные классы для переходов, для них выставляется префикс с именем перехода. Ниже можно ознакомиться с некоторыми стандартными классами для переходов.

v-enter − Этот класс вызывается перед обновлением/добавлением элемента. Это начальное состояние.

v-enter-active − Этот класс используется для определение задержки, продолжительности и кривой замедления для вступления в фазу перехода. Это полностью активное состояние, класс доступен на протяжении всей фазы вступления.

v-leave − Добавляется при запуске или удалении перехода.

v-leave-active − Применяется во время фазы выхода. Он удаляется после выполнения перехода. Этот класс используется для применения задержки, продолжительности и кривой замедления во время фазы выхода.

Каждый из вышеперечисленных классов будет иметь префикс с названием перехода. Мы задали переходу имя fade, следовательно, классы будут называться .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active. Они определяются следующим образом.

Читайте также: