Анімаційні ефекти переходів

Загальні відомості

Vue дає можливість самим різним чином анімувати переходи при оновленні об'єктів DOM, а також при їх додаванні і видаленні. Його інструменти дають можливість:

На цій сторінці ми розглянемо тільки анімації появи і зникнення елементів, а також анімації списків. У наступному розділі ви можете знайти інформацію про анімації переходів між станами компонентів.

Анімація одиночного елемента / компонента

Vue має компонентом-обгорткою transition. що дозволяє анімувати поява і зникнення елемента або компонента в наступних випадках:

  • Умовний рендеринг (використовуючи v-if)
  • Умовне відображення (використовуючи v-show)
  • динамічні компоненти
  • Кореневі елементи компонентів

Розглянемо в дії простий приклад:

Коли елемент, загорнутий в компонент transition. вставляється або віддаляється, відбуваються такі дії:

Vue автоматично дізнається, застосовані чи до цільового елементу CSS-переходи або анімації. Якщо так, відповідні CSS-класи будуть належним чином оновлені в потрібні моменти часу.

класи переходів

Є шість класів, що застосовуються в анімаціях появи і зникнення елементів:

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-переходи. Ось невеликий приклад:

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

Для того щоб Vue знав про завершення анімації, йому потрібна установка передплатників на події. Залежно від використовуваних правил CSS, такою подією буде або transitionend. або animationend. Якщо ви використовуєте тільки один з підходів, Vue визначить правильний тип автоматично.

Однак, іноді може знадобитися використання обох підходів на одному елементі. Наприклад, CSS-анімація під керуванням Vue при появі або зникненні елемента може бути сусідами з ефектом CSS-переходу при наведенні курсору миші на елемент. У таких випадках потрібно явне вказівку типу події, на яке повинен буде орієнтуватися Vue. Атрибут type може отримати значення animation або transition.

Вказівка ​​тривалості переходу

Додано в версії 2.2.0+

У більшості випадків, Vue може автоматично визначити коли перехід завершено. За замовчуванням, Vue чекає першої події transitionend або animationend на кореневому елементі. Тим не менш, це не завжди може бути потрібним - наприклад, ми можемо мати хореографічну послідовність переходів, де деякі внутрішні елементи можуть мати затримку перед переходом або довший за часом перехід, ніж у кореневого елемента.

У таких випадках ви можете явно вказати тривалість переходу (в мілісекундах) за допомогою опції duration на компоненті :

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