jQuery .animate()答案

【问题标题】：jQuery .animate()jQuery .animate()
【发布时间】：2013-06-21 10:15:09
【问题描述】：

在小提琴中，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的地方

【问题讨论】：

标签： jquery html css jquery-animate translate3d

【解决方案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);

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

【讨论】：