Дизайн материала Ripple Animation для перехода на HTML Web

Question

Здравствуйте, StackOverFlowers!

Я нашел эту действительно потрясающую анимацию на jsfiddle.net и очень хотел бы использовать ее в своем проекте.Если вы перейдете по ссылке, автор 'internoma' заявляет, что ее можно использовать в качестве перехода страницы, если добавлен небольшой Ajax.

Мой вопрос: какой код Ajax я добавляю, чтобысделать эту работу ?!

Я чрезвычайно потерян, любые предложения будут с благодарностью.

Если вы знаете, как заставить это работать, используя Barba.js или smoothState.js, это было бы здорово, так как это плагины, которые я хотел бы углубить в изучение.

Заранее спасибо!

Ссылка: Материал Дизайн Пульсация перехода

JavaScript:

$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),
  rippler = $('.ripple'),
  finish = false,
  monitor = function(el) {
    var computed = window.getComputedStyle(el, null),
        borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));
    if (!finish && borderwidth >= 1500) {
      el.style.WebkitAnimationPlayState = "paused";
      el.style.animationPlayState = "paused";
      swapContent();
    }
    if (finish) {
      el.style.WebkitAnimationPlayState = "running";
      el.style.animationPlayState = "running";
      return;
    } else {
      window.requestAnimationFrame(function() {monitor(el)});
    }
  };

  storedcontent = $('#content-2').html();
  $('#content-2').remove();

   rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd 
      mozAnimationEnd animationend", function(e){
      ripple_wrap.removeClass('goripple');
    });

    $('body').on('click', 'a', function(e) {
     rippler.css('left', e.clientX + 'px');
     rippler.css('top', e.clientY + 'px');
     e.preventDefault();
     finish = false;
     ripple_wrap.addClass('goripple');
     window.requestAnimationFrame(function() {monitor(rippler[0])});


   });



    function swapContent() {
  var newcontent = $('#content-area').html();
  $('#content-area').html(storedcontent);
  storedcontent = newcontent;
  // do some Ajax, put it in the DOM and then set this to true
  setTimeout(function() {
    finish = true;
  },10);
   }

 });

CSS

   .ripple-wrap {
     display: none;
     overflow: hidden;
     position: fixed;
     font-size: 0;
     z-index: 1000;
     top: 0; left: 0; right: 0; bottom: 0;
   }
   @-webkit-keyframes RIPPLER {
     0%   { border-width: 0; }
     40% { 
     height: 0;
     width: 0;
     border-width: 1500px;
     margin-top: -1500px;
     margin-left:-1500px; 
     border-color: #009688;
  }

  41% { 
     height: 0;
     width: 0;
     border-width: 1500px;
     margin-top: -1500px;
     margin-left:-1500px; 
     border-color: #009688;
 }
  100% {
     border-width: 1500px;
     height: 2000px;
     width: 2000px;
     margin-top: -2500px;
     margin-left:-2500px;
     border-color: #009688;
   }
 }
  @keyframes RIPPLER {
     0%   { border-width: 0; }
     40% { 
     height: 0;
     width: 0;
     order-width: 1500px;
     margin-top: -1500px;
     margin-left:-1500px; 
     border-color: #009688;
  }
  41% { 
     height: 0;
     width: 0;
     border-width: 1500px;
     margin-top: -1500px;
     margin-left:-1500px; 
     border-color: #009688;
  }
  100% {
     border-width: 1500px;
     height: 2000px;
     width: 2000px;
     margin-top: -2500px;
     margin-left:-2500px;
     border-color: #009688;
  }
 }
 .ripple {
     display: block;
     height: 0;
     width: 0;
     border-width: 0px;
     border-style: solid;
     border-color: #00796b;
     border-radius: 100%;
     position: absolute;
     top: 300px;
     left: 300px;
     -webkit-animation: none;
     animation: none;
 }
  .ripple-wrap.goripple {
     display: block;
 }
  .ripple-wrap.goripple .ripple {
     -webkit-animation-name: RIPPLER;
     -webkit-animation-duration: 1.5s;
     -webkit-animation-fill-mode: forwards;
     animation-name: RIPPLER;
     animation-duration: 1.5s;
     animation-fill-mode: forwards;

   }

HTML

     <div class="wrap" id="content-area">
     <h1>Material Design Ripple Transition</h1>
     <p>Just playing around to see if I can recreate the Material Design 
     ripple as a page transition in CSS. Click any <a href="#">link</a> in 
     this block of text to load another set of text. The <a 
     href="#">links</a> don't go anywhere yet. They are just <a 
     href="#">hooks</a> to allow you to click somewhere</p>

     <p>The style and animation is entirely CSS so it is smooth. JavaScript 
     is used to add classes at the right time. It also pauses to wait for the 
     content to be replaced, and calculates where to centre the hole. There 
     are two stages to the animation. When a <a href="#">link</a> is clicked 
     the border-width grows very large.</p>

      <p>That's enough reading on this slide. Click a <a href="#">link</a> to 
     load the second slide</p>


     </div>
     <div id="content-2" style="display:none">
     <h2>Slide Two</h2>
     <p>This is the second slide. If you want you can <a href="#">go back to 
     the first slide</a>. The second part of the animation is increasing the 
     size of the element itself in order to create a hole.</p>

      <p>This transition could be used for presentation slides. Using 
     pushState then this could be used as a transition between webpages.</p>


      </div>

      <div class="ripple-wrap"><div class="ripple"></div></div>