Question

我正在处理this experiment，我遇到了问题。我正在研究Chrome（40）＆amp; Windows和一切都像魅力一样，而不是我用Mac（41dev）拍摄我的Mac，并且过渡并不像Windows上那样平滑。我真的不知道为什么会这样。
也许是因为我是这类动画的新手。

编辑：

我已将动画置于requestAnimationFrame中，但任何内容都发生了变化。

编辑2：

我添加了一个条件来尝试触发动画ONCE，然后向右射击，但在mac中仍然不顺畅，有点小故障多数民众赞成:(更好地检查代码集）

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

我遇到了一个类似的问题，当我将我的Chrome更新到Mac版本41时（我还没有在其他任何地方测试过）。我有一个绝对定位的元素，我在滚动时更新，在更新Chrome之前它曾经很平滑，但现在它有点滞后。它在Firefox和Safari中很好用，所以我猜这个版本的Chrome存在问题，至少在Mac上是这样。

Answer 2

如果计算机无法提供可接受的性能，那么帧之间的时间并不重要。 ~~translate3d很贵，请尝试使用普通translate（不使用z轴）。~~ 此外，如果scale是静态的（始终为1.33），请将其删除并更改其他样式，如font-size。

修改

你搞得一团糟...... var title = $("h1"); - 重复

$(title) - 为了什么？它是jQuery对象

var scrolled = $(window).scrollTop(); var st = $(window).scrollTop(); - 两个变量中的值相同！

$(window).scroll(function(){ window.requestAnimationFrame(function(){ - 没有任何意义

var posTitle = $("h1").offset().top; - 使用title代替创建新对象

优化代码：

$(document).ready(function(){ var title = $("h1"); var win = $(window); var htmlbody = $('html,body'); var vh = win.height() - 300; var moveY = -(title.offset().top - 300); var moveX = -(title.offset().left - 150); var lastScrollTop = 0; title.css({ transform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", MozTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", msTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)" }); title.css({ "transition" : "all 0.8s", "-webkit-transition" : "all 0.8s", "-moz-transition" : "all 0.8s", "-o-transition" : "all 0.8s" }); $(window).scroll(function(){ var scrolled = win.scrollTop(); if( htmlbody.is(':animated') ) return (lastScrollTop = scrolled); // drop /* Not needed, but with resizing can be helpful var vh = win.height() - 300; var moveY = -(title.offset().top - 300); var moveX = -(title.offset().left - 150); //*/ /* SCROLL DOWN*/ console.log("sono il cicli con ST= " + scrolled + ",lastScrollTop= " + lastScrollTop + ", scrolled= " + scrolled + ", vh " + vh ); if (scrolled > lastScrollTop && scrolled < vh){ console.log( "scendo" ); htmlbody.stop().animate({scrollTop : vh}, 700); title.css({ transform: "translate3d(0px,0px,0px)", WebkitTransform: "translate3d(0px,0px,0px)", MozTransform: "translate3d(0px,0px,0px)", msTransform: "translate3d(0px,0px,0px)" }); title.removeClass("opening"); } /* SCROLL UP*/ else if(scrolled < vh){ console.log( "Arrampico" ); htmlbody.stop().animate({scrollTop : 0}, 700); title.css({ transform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", MozTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)", msTransform: "translate3d("+ moveX + "px," + moveY + "px,0px) scale(1.33)" }); title.addClass("opening"); } lastScrollTop = scrolled; }); });

Glitchy-Freezing - 滚动时不是平滑的动画 - 使用requestAnimationFrame

编辑：

编辑2：

2 个答案: