CSS-переходы во Vue.js и Nuxt.js

Переходы - это хороший способ удалить, изменить или обновить данные в приложении, потому что их применение добавляет приятный эффект и улучшает взаимодействие с пользователем. В этом руководстве мы рассмотрим различные способы применения переходов в приложениях, созданных на основе Vue.js и Nuxt.js.

Переходы - это модуль CSS, который позволяет создавать постепенные переходы между значениями определенных свойств CSS. Поведение этих переходов можно контролировать, задав их временную функцию, продолжительность и другие атрибуты. Использование подобных переходов в приложениях и на веб-сайтах улучшает визуальное восприятие, а также иногда привлекает и удерживает внимание пользователя, когда часть информации выводится на экран или скрывается с него. Согласно Can I Use, переходы поддерживаются большинством браузеров, хотя есть некоторые незначительные проблемы с Internet Explorer и Safari.

Vue.js - это JavaScript-платформа с открытым исходным кодом, предназначенная для создания клиентских веб-приложений и одностраничных приложений (SPA). Одна из особенностей этой платформы заключается в возможности плавно добавлять переходы в приложение, переключаться между страницами или компонентами, и в этом руководстве мы рассмотрим, как это сделать.

Nuxt.js - это также JavaScript-фреймворк, построенный на основе Vue.js (и часто называемый фреймворком фреймворка), предназначенный для создания серверных веб-приложений, статических веб-сайтов, а также SPA. Он работает так же, как и Vue.js, поэтому, если вы знаете Vue.js, у вас не должно возникнуть особых проблем при работе с Nuxt.js. Nuxt.js предоставляет два свойства для добавления переходов в приложение, и мы также рассмотрим их в этом руководстве.

Это руководство подразумевает наличие базовых знаний либо Vue.js или Nuxt.js. Все фрагменты кода, приведенные в этом руководстве, можно найти на GitHub.

Что такое переход?

Согласно Оксфордскому словарю, переход можно определить, как:

«Отрывок в тексте, который плавно связывает две темы или два раздела друг с другом.

Процесс или период перехода от одного состояния к другому».

С точки зрения физики переход определяется так:

«Переход атома, ядра, электрона и т. д. из одного квантового состояния в другое с испусканием или поглощением излучения».

Из этих определений мы получаем представление о том, что такое переход. Оба определения включают в себя две разные вещи или два разных состояния. С точки зрения кода, переход не так уж и отличается.

Что такое переход CSS?

Согласно веб-документации Mozilla:

«CSS Transitions - это модуль CSS, который позволяет создавать постепенные переходы между значениями определенных свойств CSS. Поведение этих переходов можно контролировать, указав их временную функцию, продолжительность и другие атрибуты».

Это означает, что мы можем определить переход CSS как изменение свойства CSS для одного или нескольких элементов от одного значения к другому.

Свойство CSS transition позволяет добавить эффект перехода к любому действительному элементу. Оно состоит из четырех других свойств (пяти, если считать само свойство transition), которые можно использовать по отдельности или комбинировать в виде сокращений. У каждого свойства своя функция.

transition-property

transition-property принимает имя свойства CSS, изменения которого мы хотим отслеживать, и для которого мы хотим задать переход. Выглядит это следующим образом:

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  background-color: red;
  color: #fff;
  border: 0;
}

Но это свойство ничего не делает без следующего свойства.

transition-duration

Свойство transition-duration определяет время, которое должно продолжаться изменение элемента (или элементов) в transition-property. Это свойство необходимо для того, чтобы переход работал. Если оно не установлено (со значением больше чем 0s), то значение 0s, используемое по умолчанию, будет означать, что переход не будет работать. Итак, установим длительность перехода:

.btn {
  width: 200px;
  transition-property: width;
  transition-duration: 2s;
  background-color: red;
  color: #fff;
  border: 0;
}

В приведенном выше коде у нас есть элемент с именем класса btn, он имеет ширину 200px. Мы используем как свойство transition-property, так и свойство transition-duration. Это означает: «Эй, CSS, следи за изменением свойства width, и когда оно произойдет, позвольте эффекту измениться в течение 2s».

Итак, если у нас есть кнопка с классом btn, то содержимое файла index.html будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transitions</title>
    <link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
    <Section>
        <h1>Hi CSS Transitions</h1>
        <button class="btn">Hover on me to see a cool transition</button>
    </Section>
</body>
</html>

У нас есть HTML-файл, содержащий кнопку с классом, для которого заданысвойства transition-property и transition-duration, отслеживающие измененияширины элемента.

Следует отметить, что для того, чтобы переход для кнопки работал, мы должны фактически изменить ширину этого элемента, либо вручную настроив ширину с помощью инструментов разработчика, доступных в браузере, используя один из псевдо-классов CSS или с помощью JavaScript. В рамках этого руководства мы собираемся использовать псевдокласс CSS :hover:

// существующие стили
.btn:hover {
  width: 300px;
}

Теперь, если мы наведем курсор на эту кнопку, то увидим, что ширина кнопки постепенно увеличивается в течение установленного времени, то есть 2s.

transition-timing-function

Свойство transition-timing-function определяет скорость, с которой происходитэффект перехода. Для этого свойства доступно пять значений:

• ease
  Это значение (используется по умолчанию) определяет эффект перехода, который начинается медленно, затем происходить быстрее и заканчивается опять медленно.
• linear
  Определяет эффект перехода с одинаковой скоростью от начала до конца.
• ease-in
  Определяет эффект перехода с медленным началом.
• ease-out
  Определяет эффект перехода с медленным окончанием.
• ease-in-out
  Определяет эффект перехода с медленным началом и окончанием.
• cubic-bezier(n,n,n,n)
  Позволяет определять собственные значения в кубической функции Безье.

Таким образом, если мы добавим к нашей кнопке ease-in, необходимо будет обратить внимание на скорость, с которой измененяются width и height, по сравнению со скоростью, при которой кнопка возвращается в нормальное состояние. Вот наш обновленный файл styles.css:

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-in;
  background-color: red;
  color: #fff;
  border: 0;
}

Если мы хотим более впечатляющего эффекта скорости или хотим устанавливать скорость на свое усмотрение, то можно использовать cubic-bezier(n,n,n,n):

btn {
    width: 200px;
    height: 50px;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: red;
    color: #fff;
    border: 0;
}

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

Кубическая функция Безье в инструментах разработчика, доступных прямо в браузере.

Если вы нажмете на выделенную часть инструментов разработчика, то попадете в интерфейс для изменения параметров cubic-bezier:

Интерфейс кубической функции Безье выделен желтым цветом.

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

transition-delay

Свойство transition-delay задает, сколько времени (в секундах) пройдет перед тем, как начнет происходить эффект перехода. Это время отличается от значения свойства transition-duration, которое определяет, как долго будет продолжаться эффект перехода.

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 5s;
  background-color: red;
  color: #fff;
  border: 0;
}

Если вы проверите это в браузере, то заметите задержку перед тем, как width элемента начнет изменяться. Это происходит из-за значений свойства transition-delay, которые мы установили.

Сокращенное свойство

Использование отдельных свойств перехода может быть утомительным. По этой причине, предусмотрено сокращённое свойство: transition. Оно принимает все свойства в определенном порядке:

{
  transition: a b c d;
}

В приведенном выше примере буквы соответствуют следующему:

• а: transition-property
• b: transition-duration
• с: transition-timing-function
• d: transition-delay

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

// из
.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 1s;
  background-color: red;
  color: #fff;
  border: 0;
}

// в
.btn {
  width: 200px;
  height: 50px;
  transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  background-color: red;
  color: #fff;
  border: 0;
}

Если мы протестируем этот код в браузере, то получим тот же эффект перехода, что и при использовании отдельных свойств.

Переходы во Vue.Js

Vue.js предлагает два разных способа добавления переходов в приложение. Это не значит, что мы не можем использовать переходы с помощью CSS. Это просто означает, что разработчики Vue.js настроили методы поверх CSS, чтобы упростить использование переходов. Давайте рассмотрим их по очереди.

Переход отдельных элементов и компонентов

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

• условный рендеринг (использование v-if);
• условное отображение (использование v-show);
• динамические компоненты;
• компоненты корневых узлов.

При разработке приложения, бывают случаи, когда мы хотим отображать данные для пользователя в зависимости от значения (например, логического). Вот пример того, как это работает, взятый из файла index.vue:

<template>
  <div>
    <p v-if="show">Now you see me!</p>
    <p v-else>Now you don't!</p>
    <button @click="show = !show">click me</button>
  </div>
</template>
<script>
export default {
 data() {
   return {
     show: true
   }
 }
}
</script>
<style>
</style>

Мы добавили на эту страницу два абзаца, которые отображаются в зависимости от значения show. У нас также есть кнопка, которая меняет при нажатии значение show. Мы добавим эту страницу в файл App.vue, импортировав ее следующим образом:

<template>
  <div id="app">
    <Index />
  </div>
</template>
<script>
import Index from "./components/index.vue";
export default {
  name: 'App',
  components: {
    Index
  }
}
</script>

Если мы откроем браузер, то увидим абзац и кнопку:

Целевая страница Vue.js в состоянии по умолчанию.

Прямо сейчас нажатие на кнопку изменяет только значение show, что приводит к изменению видимого текста:

Целевая страница при нажатии кнопки.

Добавить переход к этому абзацу можно, заключив оба абзаца в компонент transition. Этот компонент принимает свойство name, которое очень важно для работы перехода.

<template>
  <div>
    <transition name="fade">
      <p v-if="show">Now you see me!</p>
      <p v-else>Now you don't!</p>
    </transition>
    <button @click="show = !show">click me</button>
  </div>
</template>

Именно свойство name сообщает Vue.js, какой переход применить к элементам или компонентам внутри компонента transition. На этом этапе, если мы кликнем по кнопке, мы все равно не заметим никакого перехода, потому что нам еще предстоит добавить конфигурацию для перехода в виде классов CSS.

Следует отметить, что при использовании перехода между двумя элементами одного и того же тега необходимо указать атрибут key для каждого элемента.

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="visible">Now you see me!</p>
      <p v-else key="notVisible">Now you don't!</p>
    </transition>
    <button @click="show = !show">click me</button>
  </div>
</template>

Vue.js имеет шесть классов перехода, которые применяются к элементам или компонентам внутри компонента transition, и каждый из этих классов представляет собой состояние в процессе перехода. Мы рассмотрим лишь некоторые из них.

v-enter

Класс v-enter представляет собой «начальное состояние для входа». Это момент, когда условие (v-if или v-else) было выполнено, и элемент должен стать видимым. На этом этапе класс был добавлен к элементу, и он удаляется после добавления элемента. Свойство name (в данном случае со значением fade), прикрепленное к компоненту transition, имеет префикс для этого имени класса, но без расширения v. v может использоваться по умолчанию, если name не предусмотрено. Таким образом, мы можем добавить этот класс в файл index.vue:

<style>
p {
  color: green;
}

.fade-enter{
  color: red;
  transform: translateY(20px);
}
</style>

Во-первых, мы добавляем color green ко всем абзацам на странице. Затем мы добавляем первый класс перехода fade-name. Внутри этого класса, мы изменяем color на red, и используем свойства transform и translateY для перемещения абзаца на 20px вдоль оси у (вертикально). Если мы попробуем нажать на кнопку еще раз, то заметим, что во время переключения происходит очень небольшой переход или совсем не происходит перехода, потому что нам нужно добавить следующий класс, который мы рассмотрим далее.

v-enter-active

Класс v-enter-active представляет собой «все входящее» состояние перехода элемента. Это означает, что данный класс добавляется непосредственно перед тем, как элемент вставлен или становится видимым, и он удаляется, когда переход закончился. Этот класс имеет важное значение для работы v-enter, потому что он может быть использован для добавления к классу CSS-свойства transition, вместе с отдельными свойствами (transition-property, transition-duration, transition-timing-function и transition-delay), некоторые из которых необходимы для того, чтобы эффект перехода работал. Давайте добавим этот класс в наше приложение и посмотрим, что произойдет:

.fade-enter-active {
  transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

Теперь, если мы кликнем по кнопке, то заметим изменение цвета и положения каждого из текстов по мере их появления. Но переход от visible к hidden недостаточно плавный, потому что никакого перехода не происходит.

v-leave-active

Класс v-leave-active представляет собой все состояние, в котором элемент изменяется от visible до hidden. Это означает, что данный класс применяется с момента, когда элемент начинает покидать страницу, и удаляется после завершения перехода. Этот класс важен для применения перехода leave, поскольку он принимает CSS- свойство transition, которое также принимает другие свойства перехода. Давайте добавим его в наше приложение и посмотрим, что произойдет:

.fade-leave-active {
  transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

Если мы сейчас кликнем по кнопке, то заметим, что до исчезновения элемента проходит около 2 секунд. Это связано с тем, что Vue.js ожидает, что будет добавлен следующий класс с этим переходом, чтобы он вступил в силу.

v-leave-to

Переход v-leave-to представляет собой состояние «ухода», а это означает точку, в которой элемент начинает уходить и активируется его переход. Он добавляется через один кадр после срабатывания перехода ухода и удаляется по завершении перехода или анимации. Давайте добавим этот класс в наше приложение и посмотрим, что произойдет:

.fade-leave-to {
  transform: translateX(100px);
  color: cyan;
}

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

Теперь, когда мы понимаем, как работают переходы в Vue.js, вот изображение, которое объединяет все, что мы разобрали:

Классификация классов переходов Vue.js.

Наконец, обратите внимание на не очень плавный эффект, который имеет место во время перехода в состояния входа и выхода элементов. Это связано с тем, что переходы в Vue.js происходят одновременно. Vue.js предоставляет свойство mode, которое помогает добиться плавного процесса перехода. Это свойство принимает одно из следующих значений:

• in-out
  Сначала появляется новый элемент, а затем, когда переход завершается, начинается переход текущего элемента.
• out-in
  Сначала происходит переход текущего элемента, а затем, когда он будет завершен, происходит переход нового элемента.

Если мы добавим mode в файл index.vue и попробуем снова кликнуть по кнопке, мы должны увидеть более плавный переход:

<template>
  <div>
    <transition name="fade" appear mode="out-in">
      <p v-if="show" key="visible">Now you see me!</p>
      <p v-else key="notVisible">Now you don't!</p>
    </transition>
    <button @click="transitionMe">click me</button>
  </div>
</template>

Теперь, если мы нажмем на кнопку, то заметим, что один элемент уходит раньше, чем входит другой. Это результат работы значения свойства mode, которое мы выбрали для этого перехода. Если мы попробуем другой режим, то получим другое поведение.

Список переходов

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

Ошибка Vue.js в консоли.

Это связано с тем, что компонент transition не предназначен для одновременной визуализации более чем одного элемента. Если мы хотим переместить два элемента или более за раз или отобразить список (с помощью v-for), необходимо использовать компонент transition-group. Этот компонент также принимает свойство name, но при этом он имеет некоторые отличия от компонента transition, в том числе:

• Атрибут key требуется для каждого элемента внутри этого компонента.
• В свойстве modeнет необходимости, потому что одновременно может отображаться более одного элемента.
• По умолчанию отображается элемент span, но это можно изменить, указав свойство tag при определении компонента transition-group. Давайте рассмотрим пример (в файле vue):

    <template>
  <div>
    <h1>List/Group Transition</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{user.name}}
        <button>Remove</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        {
          name: "Vuejs",
          id: 1
        },
        {
          name: "Vuex",
          id: 2
        },
        {
          name: "Router",
          id: 3
        }
      ]
    };
  }
};
</script>
<style>
</style>

В приведенном выше коде у нас есть массив users, который мы используем в цикле v-for, отображая имя в разделе шаблона. Для просмотра этого списка нам необходимо импортировать на страницу компонент App.vue:

<template>
  <div id="app">
    <Index />
    <listTransition />
  </div>
</template>
<script>
import Index from "./components/index.vue";
import listTransition from "./components/listTransition.vue";
export default {
  name: "App",
  components: {
    Index,
    listTransition
  }
};
</script>

Обратите внимание на то, что при использовании компонента transition-group вместо обертывания списка в тег ul (или любой другой тег) мы оборачиваем его в компонент transition-group и добавляем тег в свойство tag, например, так:

<template>
  <div>
    <h1>List/Group Transition</h1>
    <transition-group name="slide-fade" tag='ul'>
      <li v-for="user in users" :key="user.id">
        {{user.name}}
        <button>Remove</button>
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        {
          name: "Vuejs",
          id: 1
        },
        {
          name: "Vuex",
          id: 2
        },
        {
          name: "Router",
          id: 3
        }
      ]
    };
  }
};
</script>
<style>
.slide-fade-enter-active {
  transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1),
    color 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-leave-active {
  transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1),
    color 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter {
  color: mediumblue;
  transform: translateY(20px);
}
.slide-fade-leave-to {
  transform: translateX(100px);
  color: cyan;
}
</style>

В этом примере мы заменили тег ul на компонент transition-group и добавили ul в качестве значения свойства tag. Если мы проверим обновленную страницу в инструментах разработчика, то увидим, что список оборачивается в элемент, который мы указали в свойстве tag (то есть ul).

Тег ul выделен в инструментах разработчика.

Мы также добавили к этому компоненту свойство перехода name со значением slide-fade и правилами стилей, приведенными ниже, в разделе style. Чтобы это сработало, нам нужно добавить в файл следующие строки кода:

<template>
  <div>
    <h1>List/Group Transition</h1>
    <transition-group name="slide-fade" tag="ul">
      <li v-for="user in users" :key="user.id">
        {{user.name}}
        <button @click="removeUser(user.id)">Remove</button>
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  // ...
  methods: {
    removeUser(id) {
      let users = this.users.filter(user => user.id !== id);
      this.users = users;
    }
  }
};
</script>

В разделе шаблонов мы в цикле добавляем к каждой кнопке событие клика и передаем user.id методу removeUser, прикрепленному к этому событию клика. Затем мы создаем функцию в разделе script файла. Эта функция принимает в качестве аргумента id. Затем мы перебираем существующих пользователей и отфильтровываем пользователя, idкоторого передано в эту функцию. Когда это будет сделано, мы сохраняем новый массив пользователей в данные страницы.

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

Переходы в Nuxt.JS

Добавление переходов в приложение, созданное на основе Nuxt.js сильно отличается от того, к чему мы привыкли во Vue.js. В Nuxt.js компонент transition автоматически добавляется в приложение. Все, что нужно сделать, это одно из следующего.

Добавить отдельный компонент страницы

Nuxt.js позволяет легко добавлять переходы к отдельным компонентам страницы. Этот переход применяется, когда пользователь переходит на эту страницу. Все, что нам нужно сделать, это добавить свойство transition в раздел script компонента. Это свойство может быть строкой, функцией или объектом. Оно принимает следующие значения:

• name,
• mode,
• css,

Как и Vue.js, Nuxt.js имеет значение name по умолчанию, которое назначается классу перехода, если name не указано, и это значение page. Давайте посмотрим, как это работает, когда мы добавим его в наше приложение в файл transition.vue:

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero
      odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut
      eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis.
    </p>
    <nuxt-link to="/">home</nuxt-link>
  </div>
</template>
<script>
export default {
  transition: {
    name: "fade",
    mode: "out-in"
  },
  data() {
    return {
      show: true
    };
  }
};
</script>
<style>
p {
  color: green;
}
.fade-enter-active {
  transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1),
    color 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-leave-active {
  transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1),
    color 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter {
  color: mediumblue;
  transform: translateY(20px);
}
.fade-leave-to {
  transform: translateX(100px);
  color: cyan;
}
</style>

На этой странице мы отобразили «lorem ipsum» в разделе шаблонов. Мы также добавили свойство transition, которому мы передали объект, для свойства name которого установлено значение fade, а для mode установлено значение out-in. Наконец, в раздел style мы добавили несколько стилей, которые управляют переходом, когда пользователь перемещается между этой и другой страницей.

Чтобы этот переход сработал, мы должны перейти к /transition, но мы не заметим никакого перехода, если вручную введем этот маршрут в браузере. Итак, давайте добавим ссылку на эту страницу в страницу index.vue.

<template>
  <div class="container">
    <div>
      // ..
      <nuxt-link to="/transition">next page</nuxt-link>
    </div>
  </div>
</template>
<template>
  <div class="container">
    <div>
      // ..
      <nuxt-link to="/transition">next page</nuxt-link>
    </div>
  </div>
</template>

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

pageTransition

Добавление переходов на отдельные страницы может быть сложной задачей, если мы хотим добавить их ко всем страницам в приложении. Здесь пригодится pageTransition. Это свойство позволяет добавить общую конфигурацию для всех страниц в файл nuxt.config.js. Это свойство принимает в качестве параметра, как строку, так и объект. Посмотрим, как это работает на примере файла nuxt.config.js:

export default {
    // ...
    /*
     ** Глобальный CSS
     */
    css: [
        '~/assets/transition.css'
    ],
    pageTransition: {
        name: "fade",
        mode: "out-in"
    },
}

В этом примере мы добавили ссылку на файл CSS, который вскоре создадим. Мы также добавили в файл свойство pageTransition вместе с его конфигурацией. Теперь давайте создадим CSS-файл transition.css, и добавим в него следующие стили:

.fade-enter-active {
    transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-leave-active {
    transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter {
    color: mediumblue;
    transform: translateY(20px);
}
.fade-leave-to {
    transform: translate3d(-500px, -300px 400px);
    color: cyan;
}

Мы добавили классы и стили, которые будут применяться к переходу между одним маршрутом и другим. Если мы уберем конфигурацию перехода со страницы transition.vue и попытаемся перемещаться между двумя страницами, то получим эффект перехода.

layoutTransition

Свойство layoutTransition позволяет применять переходы на основе макета страницы. Оно работает так же, как и свойство pageTranslation, за исключением того, что полагается на layout. Имя перехода по умолчанию - layout. Вот пример того, как это работает в файле nuxt.config.js:

export default {
    // ...
    /*
     ** Глобальный CSS
     */
    css: [
        '~/assets/transition.css'
    ],
    layoutTransition: {
        name: "fade",
        mode: "out-in"
    },
}

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

<template>
  <!-- Your template -->
  <div>
    <h1>new layout</h1>
  </div>
</template>
<script>
export default {
  layout: "blog"
  // page component definitions
};
</script>

Заключение

Мы узнали о CSS переходах и том, как создавать их с помощью отдельных свойств перехода(transition-property, transition-duration, transition-timing-function и transition-delay), а также используя сокращенное свойство transition. Кроме того мы рассмотрели, как применять эти переходы, как в Vue.js, так и в Nuxt.js. Но это далеко не все. Vue.js предоставляет гораздо больше способов применения переходов в создаваемом приложении:

• «CSS-анимация», Vue.js
• «Переход между компонентами», Vue.js
• «Переходы состояний», Vue.js

Связанные ресурсы

• «Переходы CSS», MDN Web Docs
• «Переходы входа / выхода и списка», Vue.js
• «Графика входа / выхода», Vue.js
• «API: свойство страницы transition», Nuxt.js
• «API: свойства transition», Nuxt.js

Вадим Дворниковавтор-переводчик статьи «CSS Transitions In Vuejs And Nuxtjs»