Что это такое?
Barba.js — небольшая JavaScript-библиотека, которая создаёт плавные переходы между страницами обычного сайта в духе SPA, уменьшая задержку загрузки и количество HTTP-запросов.
Barba.js — небольшая JavaScript-библиотека, которая создаёт плавные переходы между страницами обычного сайта в духе SPA, уменьшая задержку загрузки и количество HTTP-запросов.Это фреймворк или просто небольшая вспомогательная библиотека?Это лёгкая библиотека (7 КБ в минифицированном виде), а не полноценный фреймворк — вы подключаете её к существующему сайту, чтобы перехватывать переходы по ссылкам и анимировать смену страниц.
Это лёгкая библиотека (7 КБ в минифицированном виде), а не полноценный фреймворк — вы подключаете её к существующему сайту, чтобы перехватывать переходы по ссылкам и анимировать смену страниц.Как добавить её на сайт?Установите через привычные для вас инструменты для JS и следуйте официальному руководству пользователя (User guide), в котором описаны установка и использование плагина.
Установите через привычные для вас инструменты для JS и следуйте официальному руководству пользователя (User guide), в котором описаны установка и использование плагина.Нужны ли мне знания больше базового HTML/CSS/JS?Достаточно среднего уровня знаний HTML, CSS и JavaScript, включая синтаксис ES6+, который используется во всех примерах.
Достаточно среднего уровня знаний HTML, CSS и JavaScript, включая синтаксис ES6+, который используется во всех примерах.Будет ли это работать в старых браузерах?Barba ориентирован на современные браузеры и использует прогрессивное улучшение; если нужна поддержка, несовместимая с ES6, есть отдельный пример устаревшего кода, на который можно опереться.
Barba ориентирован на современные браузеры и использует прогрессивное улучшение; если нужна поддержка, несовместимая с ES6, есть отдельный пример устаревшего кода, на который можно опереться.Работает ли это на любом сайте или только в определённых конфигурациях?Это независимый от фреймворков клиентский JS, который подключается к страницам любого сайта и даёт гибкость в разметке, пространствах имён (namespaces) и схеме data-атрибутов.
Это независимый от фреймворков клиентский JS, который подключается к страницам любого сайта и даёт гибкость в разметке, пространствах имён (namespaces) и схеме data-атрибутов.Можно ли расширять Barba с помощью плагинов?Да, в комплекте есть система плагинов и встроенные утилиты, которые позволяют добавлять функции, например предзагрузку страниц (prefetch) для ускорения работы.
Да, в комплекте есть система плагинов и встроенные утилиты, которые позволяют добавлять функции, например предзагрузку страниц (prefetch) для ускорения работы.Как Barba решает, какой переход проиграть?В ней есть система разрешения переходов с правилами, которые позволяют Barba автоматически выбрать подходящий переход для конкретной смены страницы.
В ней есть система разрешения переходов с правилами, которые позволяют Barba автоматически выбрать подходящий переход для конкретной смены страницы.Что такое «Sync mode»?Sync mode определяет, должны ли хуки ухода (leave) и появления (enter) перехода выполняться одновременно, а не последовательно.
Sync mode определяет, должны ли хуки ухода (leave) и появления (enter) перехода выполняться одновременно, а не последовательно.Написана ли Barba на TypeScript?Да, у неё упрощённый API, написанный на TypeScript, и она работает с Promise для управления жизненным циклом перехода.
Да, у неё упрощённый API, написанный на TypeScript, и она работает с Promise для управления жизненным циклом перехода.What are similar projects?vue-router, single-spa, scrollreveal, react-router, Hover, motion, react-motion, auto-animate
vue-router, single-spa, scrollreveal, react-router, Hover, motion, react-motion, auto-animateWhich topics is it in?transition, spa, single-page-app, router, plugin-system, animation, css, frontend, library, typescript, javascript, web
transition, spa, single-page-app, router, plugin-system, animation, css, frontend, library, typescript, javascript, web