1

你好 StackOverFlowers！

我在 jsfiddle.net 上发现了这个非常棒的动画，并且真的很想在我的项目中使用它。如果您点击链接，作者“internoma”指出，如果添加一点 Ajax，它可以用作页面转换。

我的问题是：我要添加什么 Ajax 代码才能完成这项工作？！

我非常迷茫，任何建议将不胜感激。

如果您碰巧知道如何使用 Barba.js 或 smoothState.js 来实现这一点，那也很棒，因为这些是插件，我想深入学习。

提前致谢！

链接：Material Design 波纹过渡

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>
4

0 回答 0