0

我在这里有一个小提琴：jsfiddle.net/VnGRL/

在小提琴中，update()它改变了 CSS.scroll以人为地滚动整个元素。这工作正常：

$('.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);

这里有一个类似的问题，但这只是他们没有包括的地方px

4

1 回答 1

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);

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

于 2013-06-21T11:43:50.603 回答