jQuery 动画()

Question

我这里有一个 fiddle :jsfiddle.net/VnGRL/

在 fiddle 中，在 update() 上，它更改了 .scroll 的 CSS 以人为地滚动整个元素。这很好用:

$('.scroll').css({ 
    "transform": "translate3d(0, -" + newHeight + "px, 0)",
    "-webkit-transform": "translate3d(0, -" + newHeight + "px, 0)"
});

然而，一旦我使用 .animate() 就没有任何反应:

$('.scroll').animate({ 
    "transform": "translate3d(0, -" + newHeight + "px, 0)",
    "-webkit-transform": "translate3d(0, -" + newHeight + "px, 0)"
}, 800);

有个类似的问题here但正是他们没有包含 px

的地方

Answer 1

我建议你使用 CSS 动画，如果 translate3d 可用，它应该始终可用。

$('.scroll').css({
  '-webkit-transition-duration': '350ms',
  'transition-duration', '350ms'
});

实际上，您的代码无法运行，因为 animate 是一个非常强大的基本功能。它会将您提供的内容作为属性，并尝试趋向于该值，但是您提供了一些奇怪的值，该值不是数字，而是包含一些数字的字符串 translate3d(x,y,z)，jQuery 不知道如何处理。

如果你真的需要在 JavaScript 中完成它(例如要有最终回调)，我建议你可以使用以下方法。我让它变得非常简单，如果它很关键，最好用 jQuery FX 和效果堆栈来改进它。

var animateTranslate3d(el, values, duration, complete, oldValues) {
  var $el = $(el),
      stepDuration = 10,
      remainingSteps = Math.floor(duration / stepDuration),
      newValues;

  // Optimization, after the first step, oldValues never needs to be computed again
  oldValues || (oldValues = ($el.css('transform') || $el.css('webkit-transform') || 'translate3d(0,0,0)').match(/translate3d\((\d).*,(\d).*,(\d).*\)/)).shift();
  newValues = [(values[0] - oldValues[0]) / remainingSteps, (values[1] - oldValues[1]) / remainingSteps, (values[2] - oldValues[2]) / remainingSteps];

  $el.css('transform', 'translate3d(' + newValues[0] + ',' + newValues[1] + ',' + newValues[2] + ')');

  // Animation finished
  if(duration <= 0) return (typeof complete === 'function' && complete());

  // Let's do the next step after a stepDuration delay
  setTimeout(function(){animateTranslate3d(el, values, duration - stepDuration, complete, newValues)}, stepDuration)
}

animateTranslate3d('.scroll', [0, -newHeight, 0], 800);

告诉我它是否工作正常 ;)，也许你需要稍微调试一下......