Question

我一直在使用视差一段时间，我一直在使用CSS动画，变换等，以获得我想要的结果。但在阅读了一些关于Velocity的内容之后，请考虑尝试一下。

问题是动画有某种延迟。可能是因为我没有正确应用速度，但我已经研究过，而且我做的似乎是正确的。

$ability.velocity({
  translateX: '-50px',
  opacity: '0'
});

$(document).on('scroll', function(){
 var wScroll = $(this).scrollTop();
 if(wScroll > $('.ability-self').offset().top - $(window).height()/1.2){
  $ability.velocity({
    translateX: "0",
    opacity: '1'
  });
 } else{
  $ability.velocity({
    translateX: '-70px',
    opacity: 0
  });
}

问题在于动画只在我滚动元素后1或2秒发生。我已经检查过任何CSS属性是否可能会干扰，但我找不到相关的属性。

我的JS不好吗？

Answer 1

假设您使用Velocity是正确的，您的代码会给浏览器带来很大的压力。您应该做的是首先缓存不会更改的布局值：

var window_h = $(window).height()/1.2

和

var ability_top = $('.ability-self').offset().top

第二，去抖动scroll事件处理程序，因为滚动被触发很多，你只需每帧响应一次，甚至可能更少。对于去抖动，你可以使用lodash或者Underscore的_.debounce()，或者只是复制粘贴实现，所以你的代码看起来像：

$(document).on('scroll', _.debounce(function(){
    // code here...
}, 50))

Velocity JS Lag

1 个答案: