От автора: некоторые из наиболее вдохновляющих примеров, которые я видел во front end разработке, связаны с переходом на страницу. Анимация перехода гладкая, как в мобильных приложениях. Взаимодействий подобного рода можно представить множество, но на посещаемых мной сайтах я их не вижу. Существует несколько способов сделать такую анимацию!
Что мы создадим:
Мы разработаем простейшую версию этих концепций, чтобы вы могли применить их к любому приложению. Я дам ссылку на код для этого более сложного приложения, если захотите поподробнее его изучить.
Сегодня мы обсудим, как их создавать с помощью Vue и Nuxt. В переходах страниц и анимации много движущихся частей, но не волнуйтесь! Все, что мы не успеем рассказать в статье, вы сможете изучить по ссылкам.
Почему?
В последние годы Интернет подвергся критике за появление «датированных» по сравнению с обычными приложениями для iOS и Android. Переход между двумя состояниями может снизить когнитивную нагрузку пользователя, так как при сканировании страницы необходимо создать ментальную карту всего, что содержится на ней. Когда мы переходим со страницы на страницу, пользователь должен переназначить все это пространство. Если элемент повторяется на нескольких страницах, но слегка изменен, он имитирует опыт, к которому мы уже биологически подготовлены – в пространство ничего резко не влетает и не меняется; происходит плавный переход из одного пространства в это. Глаза устроены так, что видимые объекты кажутся меньше вдали. Когда они приближаются к вам, они становятся все больше. Без этих переходов изменения могут быть потрясающими. Они заставляют пользователя перенастраивать размещение и даже понимать один и тот же элемент. Именно по этой причине эти эффекты становятся критическими в опыте, который помогает пользователю чувствовать себя как дома и быстро собирать информацию в Интернете.
Хорошая новость заключается в том, что реализация таких переходов вполне осуществима. Поехали!
Что нужно знать
Если вы не знакомы с Nuxt и как работать с его помощью создавать приложения Vue.js, есть еще одна моя статья. Если вы знакомы с React и Next.js, Nuxt.js является эквивалентом Vue. Он предлагает рендеринг на стороне сервера, разделение кода и, самое главное, перехваты для переходов страниц. Несмотря на то, что переходы с переходом на страницы, которые он предлагает, превосходны, мы не собираемся выполнять основную часть наших анимаций в этом учебнике. У фреймворка есть отличные хуки для переходов по страницам, но мы большую часть анимации реализуем по-другому.
Чтобы понять, как работают переходы, с которыми мы работаем сегодня, вам также понадобятся базовые знания о компоненте <transition /> и понимание разницы между анимациями CSS и переходами. Вам также понадобятся базовые знания о компоненте <transition-group />, и этот пост Snipcart — отличный ресурс, чтобы узнать больше об этом.
Даже если вы все поймете, прочитав эти статьи, я дам вам основную информацию о том, что происходит, когда мы сталкиваемся с вещами на протяжении всего поста.
Начало работы
Сперва необходимо создать Nuxt проект с помощью Vue CLI:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# if you haven’t installed vue cli before, do this first, globally: npm install -g @vue/cli # or yarn global add @vue/cli # then vue init nuxt/starter my-transitions-project npm i # or yarn # and npm i vuex node-sass sass-loader # or yarn add vuex node-sass sass-loader |
Отлично! Теперь первое, что вы заметите, это то, что у нас есть каталог страниц. Nuxt будет принимать любые файлы .vue в этом каталоге и автоматически настраивать маршрутизацию для нас. Довольно круто. Мы можем создать некоторые страницы для работы здесь, в нашем случае: about.vue и users.vue.
Настройка хуков
Как упоминалось ранее, Nuxt предлагает некоторые перехватчики страниц, которые действительно хорошо подходят для переходов между страницами. Другими словами, у нас есть крючки для входа и выхода страницы. Поэтому, если бы мы хотели создать анимацию, которая позволила бы нам красиво исчезать со страницы на страницу, мы могли бы сделать это, потому что хуки классов уже доступны. Мы даже можем назвать новые переходы на странице и использовать JavaScript-переходы для более продвинутых эффектов.
Но что, если у нас есть какие-то элементы, которые не должны уходить и возвращаться, а скорее должны плавно менять положение? В мобильных приложениях вещи не всегда уходят, когда они перемещаются из состояния в состояние. Иногда они легко переходят из одной точки в другую, и это делает приложение очень жидким.
Шаг 1: Vuex Store
Первое, что нам нужно сделать — создать централизованное хранилище управления состоянием с помощью Vuex, потому что нам нужно будет удерживать страницу, на которой мы находимся.
Nuxt предположит, что этот файл будет находиться в каталоге store и называется index.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: { page: 'index' }, mutations: { updatePage(state, pageName) { state.page = pageName } } }) } export default createStore |
Мы сохраняем обе страницы и создаем мутацию, которая позволяет нам обновлять страницу.
Шаг 2: промежуточное ПО
Затем в нашем промежуточном ПО нам понадобится скрипт, который я назвал page.js. Он откроет нам доступ к роуту, который меняется и обновляется перед любым из других компонентов, поэтому он будет очень эффективным.
|
1 2 3 4 |
export default function(context) { // go tell the store to update the page context.store.commit('updatePage', context.route.name) } |
Промежуточное ПО необходимо зарегистрировать в файле nuxt.config.js:
|
1 2 3 4 5 6 7 |
module.exports = { ... router: { middleware: 'pages' }, ... } |
Шаг 3: регистрация навигации
Теперь мы перейдем к нашему файлу layouts / default.vue. Этот каталог позволяет вам устанавливать разные макеты для разных структур страниц. В нашем случае мы не собираемся создавать новый макет, но изменим тот, который мы повторно используем для каждой страницы. Наш шаблон будет выглядеть следующим образом:
|
1 2 3 4 5 |
<template> <div> <nuxt/> </div> </template> |
И этот nuxt / тег будет вставлять все, что находится в шаблонах на разных страницах. Но вместо повторного использования навигационного компонента на каждой странице мы можем добавить его здесь, и он будет представлен последовательно на каждой странице:
|
1 2 3 4 5 6 |
<template> <div> <app-navigation /> <nuxt/> </div> </template> |
|
1 2 3 4 5 6 7 8 9 |
<script> import AppNavigation from '~/components/AppNavigation.vue' export default { components: { AppNavigation } } </script> |
Это отлично нам подходит, потому что скрипт не будет переигрывать каждый раз, когда страница перенаправляется. Это будет согласовано на каждой странице, и из-за этого мы не можем подключаться к нашим перехватам перехода на страницу, но вместо этого мы можем строить свои собственные с помощью того, что мы построили между Vuex и промежуточным ПО.
Шаг 4: создание перехода в компоненте Navigation
Теперь мы можем создать навигацию, но я также собираюсь использовать этот SVG, чтобы продемонстрировать основные функции, которые мы собираемся реализовать для большего приложения
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<template> <nav> <h2>Simple Transition Group For Layout: {{ page }}</h2> <!--simple navigation, we use nuxt-link for routing links--> <ul> <nuxt-link exact to="/"><li>index</li></nuxt-link> <nuxt-link to="/about"><li>about</li></nuxt-link> <nuxt-link to="/users"><li>users</li></nuxt-link> </ul> <br> <!--we use the page to update the class with a conditional--> <svg :class="{ 'active' : (page === 'about') }" xmlns="//www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 447 442"> <!-- we use the transition group component, we need a g tag because it’s SVG--> <transition-group name="list" tag="g"> <rect class="items rect" ref="rect" key="rect" width="171" height="171"/> <circle class="items circ" key="circ" id="profile" cx="382" cy="203" r="65"/> <g class="items text" id="text" key="text"> <rect x="56" y="225" width="226" height="16"/> <rect x="56" y="252" width="226" height="16"/> <rect x="56" y="280" width="226" height="16"/> </g> <rect class="items footer" key="footer" id="footer" y="423" width="155" height="19" rx="9.5" ry="9.5"/> </transition-group> </svg> </nav> </template> |
|
1 2 3 4 5 6 7 |
<script> import { mapState } from 'vuex' export default { computed: mapState(['page']) } </script> |
Мы делаем здесь несколько вещей. В скрипте мы приводим имя страницы из хранилища в качестве вычисленного значения. mapState позволит нам взять что-нибудь еще из хранилища, что будет полезно позже, когда мы будем иметь дело с большим количеством информации о пользователе.
В шаблоне у нас есть обычный nav с nuxt-link, который мы используем для маршрутизации ссылок в Nuxt. У нас также есть класс, который будет обновляться по условию на странице (он будет меняться на .active).
Мы также используем компонент <transition-group> вокруг нескольких элементов, которые будут менять позиции. Компонент <transition-group> немного волшебный, потому что он использует концепции FLIP. Если вы уже слышали о FLIP, вам будет очень приятно услышать это, потому что это действительно эффективный способ анимации в Интернете, но он обычно требуется много вычислений для реализации. Если вы еще не слышали о FLIP, вам, безусловно, будет полезно почитать, чтобы понять, как это работает, и, возможно, что более важно, чтобы сделать такой эффект, вам не придется все это делать!
Ниже представлен CSS. Мы в основном заявляем, как мы хотели бы, чтобы все элементы были размещены в этом «активном» хуке, который мы сделали. Затем мы говорим элементам, что переход применяется, если что-то меняется. Я использую 3D-преобразования, даже если я просто перемещаю что-то вдоль одной оси X или Y, потому что преобразования лучше для производительности, чем top/left/margin для уменьшения отрисовок. А еще я хочу включить аппаратное ускорение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.items, .list-move { transition: all 0.4s ease; } .active { fill: #e63946; .rect { transform: translate3d(0, 30px, 0); } .circ { transform: translate3d(30px, 0, 0) scale(0.5); } .text { transform: rotate(90deg) scaleX(0.08) translate3d(-300px, -35px, 0); } .footer { transform: translateX(100px, 0, 0); } } |
Ниже представлено урезанное демо без переходов по страницам, здесь просто показаны движения:
Я хочу отметить, что любые реализации, которые я использую здесь, — это выбор, который я сделал для размещения и перемещения — вы можете создать любой эффект, который вам нравится! Я выбираю SVG здесь, потому что он передает концепцию макета в небольшом количестве кода, но вам не нужно использовать SVG. Я также использую переходы вместо анимации из-за их декларативности: вы, по сути, заявляете: «Я хочу, чтобы это было перегруппировано здесь, когда этот класс переключается в Vue», тем более, что единственной задачей перехода является описание движение во время изменения. Это отлично подходит для нашего случая использования, потому что он очень гибкий. Затем я могу изменить его на любое другое условное размещение, и оно все равно будет работать.
Отлично! Мы получили плавный эффект между страницами, а контент все равно получает легкий плавный переход:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.page-enter-active { transition: opacity 0.25s ease-out; } .page-leave-active { transition: opacity 0.25s ease-in; } .page-enter, .page-leave-active { opacity: 0; } |
Я добавил один пример с сайта Nuxt, хотел показать, что можно делать внутренние анимации на странице:
Хорошо, это работает на маленьком демо. Давайте применим подход к чему-то более реальному. Опять же, есть демо сайт и код.
В такой же концепции:
Название страницы храним в хранилище Vuex
Промежуточное ПО фиксирует мутацию, чтобы хранилище знало, что страница изменилась
Применяем специальный класс к страницам и вкладываем переходы для каждой страницы
Навигация остается единообразной на всех страницах, но меняется положение, и мы применяем переходы
Контент страницы имеет легкий переход, и мы встраиваем некоторые взаимодействия на основе пользовательских событий
Единственное отличие состоит в том, что это немного более сложная реализация. CSS, применяемый к элементам, останется неизменным в компоненте навигации. Мы можем сообщить браузеру, в какой позиции мы хотим, чтобы все элементы находились, и поскольку для самого элемента применяется переход, этот переход будет применяться, и он будет перемещаться в новую позицию каждый раз, когда страница изменится.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// animations .place { .follow { transform: translate3d(-215px, -80px, 0); } .profile-photo { transform: translate3d(-20px, -100px, 0) scale(0.75); } .profile-name { transform: translate3d(140px, -125px, 0) scale(0.75); color: white; } .side-icon { transform: translate3d(0, -40px, 0); background: rgba(255, 255, 255, 0.9); } .calendar { opacity: 1; } } |
Это все! Мы сделали все красиво и просто. Также мы используем flexbox, grid и абсолютное позиционирование в относительном контейнере, чтобы убедиться, что все легко переводится на всех устройствах, и у нас очень мало медиа-запросов в этом проекте. В основном я использую CSS для изменений навигации, потому что я могу декларативно изложить размещение элементов и их переходов. Для микро-взаимодействия любого пользовательского события я использую JavaScript и GreenSock, потому что он позволяет мне очень легко координировать много перемещений и стабилизировать transform-origin в браузерах. Однако существует очень много способов реализации. Есть миллион способов, которыми я мог бы улучшить это демо-приложение или использовать эти анимации, это быстрый проект, чтобы показать некоторые возможности в реальном контексте.
Не забывайте использовать аппаратное ускорение и трансформации, и вы сможете достичь некоторых красивых, родных эффектов. С нетерпением жду ваших работ! У веба такой потенциал для красивого перемещения, размещения и взаимодействия, что снижает когнитивную нагрузку на пользователя.
Автор: Sarah Drasner
Источник: //css-tricks.com/
Редакция: Команда webformyself.
