使用jQuery制作translate3d动画

Question

我正在尝试用jQuery2.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

基本上，对于动画和变换，你必须使用jQuery的动画函数的步长函数，它看起来有点像这样：

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

您必须单独设置文本缩进，但基本上您所做的错误是，每次调用step函数时，值都直接设置为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/

Answer 2

您可以使用jquery.transit jQuery插件进行css3转换：

$('.box').transition({ rotate: '45deg' });
$('.box').transition({ scale: 2.2 });
$('.box').transition({ skewY: '30deg' });
$('.box').transition({
  perspective: '100px',
  rotate3d: '1,1,0,180deg'
});

非常好的插件和许多功能

延迟、可选单位、供应商前缀、链接和排队、交替缓动/持续时间语法、相对值、转换原点和缓动

Demo Here