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/

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

非常好的插件和许多功能

延迟，可选单位，供应商前缀，链接＆amp;排队，替代缓和/持续时间语法，相对值，转换起源和缓和

Demo Here

用jQuery动画translate3d

2 个答案: