使用 jQuery 动画 translate3d
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27302395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate translate3d with jQuery
提问by Rob Boerman
I'm trying to animate translate3d with Jquery 2.1.1. in 10 seconds. Then, when the animation is complete, I want it to alert me. But the problem is that it does not animate. It just changes instantly to the new css.
我正在尝试使用 Jquery 2.1.1 为 translate3d 设置动画。在 10 秒内。然后，当动画完成时，我希望它提醒我。但问题是它没有动画。它只是立即更改为新的 css。
Is there some hero that can help me with this?
有什么英雄可以帮我解决这个问题吗？
The code i use now:
我现在使用的代码：
$( ".circle" ).animate({ textIndent: 100 }, {
duration : 10000,
step : function() {
$(this).css("transform","translate3d(0px, 320px, 0px)");
},
complete : function() {
alert("completed the animation");
}
},'linear');
回答by Hive7
Basically with animate and transform you have to use the step function of the animate function of jQuery which will look a bit like this:
基本上，使用 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');
You would have to set the text-indent separately but basically what you were doing wrong was that every time the step function was called the value was set straight to 320px instead of as it goes. This can be tackled by having two separate functions and using unimportant css rules to create the values needed across the animation curve. You also need to set the queue to false so that the two animations happen at the same time and not one after the other
您必须单独设置文本缩进，但基本上您做错的是，每次调用 step 函数时，该值都直接设置为 320px，而不是按原样设置。这可以通过使用两个单独的函数并使用不重要的 css 规则来创建动画曲线所需的值来解决。您还需要将队列设置为 false，以便两个动画同时发生，而不是一个接一个
The final snippet of code would look like this:
最终的代码片段如下所示：
$('.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
});
Here is a working fiddle:
这是一个工作小提琴：
回答by Mohamad Shiralizadeh
You can use jquery.transitjQuery plugin for css3 transition:
您可以使用jquery.transitjQuery 插件进行 css3 转换：
$('.box').transition({ rotate: '45deg' });
$('.box').transition({ scale: 2.2 });
$('.box').transition({ skewY: '30deg' });
$('.box').transition({
perspective: '100px',
rotate3d: '1,1,0,180deg'
});
very good plugin and many features
非常好的插件和许多功能
Delay, Optional units, Vendor prefixes, Chaining & queuing, Alternate easing/duration syntax, Relative values, Transformation origins and Easing
延迟、可选单位、供应商前缀、链接和排队、替代缓动/持续时间语法、相对值、转换起源和缓动
