Лучшая JS библиотека на базе PJAX с анимацией

366

25 января 2017, 00:27

Начал подробнее изучать вопрос построения сайта без перезагрузки страниц. Первым делом поработал с чистым PJAX. Затем с его аналогом Barba. Второй мне показался более удобным с точки зрения создания анимации. Однако, он имеет ряд недостатков. Нельзя применить скрипт только к конкретным ссылкам, нельзя описать анимацию для разных ссылок. Например, для навигации обычный fade-эффект, а для страницы новостей - смещение при переходе влево и вправо (пример). Так же, было бы неплохо перезагружать некоторые скрипты после отработки анимации перехода, например, стартовать слайдер на загружаемой странице и т.д..

Сейчас планирую перейти к smoothState. Беглый осмотр показал, что она так же хорошо подходит для создания анимации перехода по страницам и имеет множество гибких настроек. Но, руки еще не дошли)

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

Плавный переход при переходе по основному меню.
Отличающийся стиль перехода на странице материала, например, смещение влево и вправо (самый простой вариант был бы через использование библиотеки animate.css).
Перезагрузка выбранных скриптов и других тегов в шапке сайта.

Сделал чистый пример, для удобства размещения скриптов и тестирования результата. Так он выглядит:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test project</title>
    <link type="text/css" rel="StyleSheet" href="style.css" />
    <meta property="og:type" content="article" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:title" content="" />
    <meta property="og:url" content="" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="" />
</head>
 <body>
    <header class="header">
        <nav>
            <ul class="uMenuRoot">
            <li><a href="index.html"><span>Home</span></a></li>
            <li><a href="about.html"><span>About us</span></a></li>
            <li><a href="contacts.html"><span>Contacts</span></a></li>     </ul>
        </nav>
    </header>
     <main>
         <section class="middle">
            <ul class="page-nav clr">
               <li><a href="news1.html">News 1</a></li>
               <li><a href="news2.html">News 2</a></li>
               <li><a href="news3.html">News 3</a></li>
             </ul>
             <p>Content</p>
         </section>
     </main>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 </body>
</html>

Если готовых решений ни у кого не окажется, свои результаты я естественно опубликую попозже.