javascript - Glitchy-Freezing - 滚动动画不流畅 - 使用 requestAnimationFrame

Question

我正在处理 this experiment我有一个问题。
我当时在 Chrome (40) 和 Windows 上工作，一切都很顺利，但我把我的 mac 与 Chrome (41dev) 相比，过渡并不像 Windows 上那么顺利。
我真的不明白为什么会发生这种情况。
也许是因为我对这种动画很陌生。

编辑:

我已将动画放入 requestAnimationFrame 中，但一切都发生了变化。

编辑 2:

我添加了一个条件来尝试一次触发动画，并且它触发正确，但在 mac 中仍然不流畅，有点小故障
这就是我的 js:(最好在 codepen 上检查一下)

function move(){
 var title = $('h1');
 title
    .css({
      transform: "translate3d(0px,0px, 0px)",
      WebkitTransform: "translate3d(0px,0px, 0px)",
      MozTransform: "translate3d(0px,0px, 0px)",
      msTransform: "translate3d(0px,0px, 0px)"});
}
function scrolling(lastScrollTop){
  var vh =$(window).height();
  vh = vh - 300;
  var title = $("h1");
  var posTitle = $("h1").offset().top;
  var scrolled = $(window).scrollTop();
  var leftTitle = $("h1").offset().left;
  var moveY = -(posTitle - 300);
  var moveX = -(leftTitle - 150);
  var fired = false;
  /* SCROLL DOWN*/
   if (scrolled > lastScrollTop && scrolled < vh){
     if( $('html,body').is(':not(:animated)') && fired == false ){
      fired = true;
      $('html,body').stop().animate({scrollTop : vh}, 700, function(){fired = false});
      console.log("triggerato scende");
      move();
      title.removeClass("opening");
     }     
   }
    /* SCROLL UP*/
    else{
     if(scrolled < vh){if( $('html,body').is(':not(:animated)') ){
       fired = true;
        $('html,body').stop().animate({scrollTop : 0}, 700, function(){fired = false});
        console.log("triggerato su");
         title
         .css({
          transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
          msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" });
        title.addClass("opening");
      }       
     }
   }   
   lastScrollTop = scrolled;
  return lastScrollTop;
}


$(document).ready(function(){
  var vh =$(window).height();
  vh = vh - 300;
  var title = $("h1");
  var posTitle = title.offset().top;
  var lastScrollTop = 0;
  var scrolled;
  var leftTitle = title.offset().left;
  var moveY = -(posTitle - 300);
  var moveX = -(leftTitle - 150);
  $(title)
    .css({
      transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", 
      msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" });
 setTimeout(function(){
   $(title)
    .css({"transition" : "all 0.7s", 
         "-webkit-transition" : "all 0.7s",
         "-moz-transition" : "all 0.7s",
         "-o-transition" : "all 0.7s"}
        );
 }, 300);
  $(window).scroll(function(){
       requestAnimationFrame(function(){
         lastScrollTop = scrolling(lastScrollTop)});
  });
});

有什么想法吗？谢谢大家。

Answer 1

当我将 Mac 上的 Chrome 更新到版本 41 时，我遇到了类似的问题(我尚未在其他地方进行过测试)。我有一个在滚动时更新的绝对定位元素，在更新 Chrome 之前它曾经很流畅，但现在它很滞后。在 Firefox 和 Safari 中一切正常，所以我猜这是该版本 Chrome 的问题，至少在 Mac 上是这样。