Простий спосіб додавання CSS анімації до переходів між сторінками

Радий з вами поділитися цікавим та дуже простим jQuery плагіном Аnimsition. Animsition дає можливість додавати до посилань CSS анімацію при переході.

Animsition має 18 різних анімацій:

Зникнення

`fade-in, fade-out, fade-in-up, fade-out-up, fade-in-down, fade-out-down,
fade-in-left, fade-out-left, fade-in-right, fade-out-right`

Повертання

`rotate-in, rotate-out`

Стряхнути

`flip-in-x,` `flip-out-x,` `flip-in-y` `flip-out-y`

Збільшення

`zoom-in` `zoom-out`

Встановлення

Крок перший: Прикріплення файлів плагіну та jquery

    <link href="../css/animsition.min.css" rel="stylesheet">
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
    <script src="../dist/js/jquery.animsition.min.js"></script>

Крок другий: HTML розмітка

      <div class="animsition">
        <a class="animsition-link" href="./page1">animsition link 1</a>
    
        <a class="animsition-link" href="./page2">animsition link 2</a>
      </div>

Якщо Ви бажаєте різну анімацію для різних посилань:

    <a class="animsition-link" data-animsition-out="flip-out-y" data-animsition-out-duration="2000" href="./page1">
      animsition link 1
    </a>
    
    <a class="animsition-link" data-animsition-out="rotate-out" data-animsition-out-duration="500" href="./page2">
      animsition link 2
    </a>

Якщо ви хочете виставити кожній сторінці різну анімацію:

    <div class="animsition">
      ...
    </div>

Крок третій: Викликаємо Animsition

    $(document).ready(function() {
      $(".animsition").animsition({
        inClass               :   'fade-in',
        outClass              :   'fade-out',
        inDuration            :    1500,
        outDuration           :    800,
        linkElement           :   '.animsition-link', 
        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
        touchSupport          :    true, 
        loading               :    true,
        loadingParentElement  :   'body', //елемент-обгортка для animsition
        loadingClass          :   'animsition-loading',
        unSupportCss          : [ 'animation-duration',
                                  '-webkit-animation-duration',
                                  '-o-animation-duration'
                                ]
      });
    });