用jQuery动画translate3d

Question

我正在尝试使用Jquery 2.1.1为translate3d设置动画.在10秒钟内.然后,当动画完成时,我希望它提醒我.但问题是它没有动画.它只是立即改变到新的CSS.

有一些英雄可以帮我这个吗？

我现在使用的代码:

$( ".circle" ).animate({ textIndent: 100 }, {
    duration : 10000,
    step : function() {
      $(this).css("transform","translate3d(0px, 320px, 0px)"); 
    }, 
    complete : function() {
        alert("completed the animation");
    }
},'linear');

Answer 1

基本上使用animate和transform你必须使用jQuery的animate函数的step函数,它看起来有点像这样:

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');

你必须单独设置文本缩进,但基本上你错误的是每次调用步骤函数时,值都被直接设置为320px而不是它.这可以通过使用两个单独的函数并使用不重要的css规则来创建动画曲线所需的值来解决.您还需要将队列设置为false,以便两个动画同时发生而不是一个接一个地发生

最后一段代码看起来像这样:

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');
$(".animate").animate({ textIndent: 100 }, {
    duration : 10000,
    easing: 'linear',
    queue: false
});

这是一个工作小提琴:

http://jsfiddle.net/Hive7/1qu2qxqh/