如何在不使用css转换的情况下将jQuery动画与css3属性结合起来？
在这个例子中; 我正在尝试使用css3 rotate属性创建一个jQuery动画。 我可以用css3 transition和jQuery css()来管理这个动画，但是我想用jQuery animate()根据我的jQuery variatons来旋转deg值。
是否可以使用jQuery 1.8.0的css3属性值进行动画处理？
这是jsFiddle检查。
jQuery的：
var rotateVal = 90; //this method isn't working $('.red').animate({ 'transform':'rotate('+rotateVal+'deg)' },500); //this way works but i don't want to do this with transitions $('.black').css({ 'transform':'rotate('+rotateVal+'deg)', 'transition':'1s' });
HTML：
编辑：删除了供应商前缀，例如-webkit- 。 感谢Kevin B.
这是可能的，但这并不容易。
var red = $(".red"), rotateVal = 90; $("").animate({ height: rotateVal },{ duration: 500, step: function(now){ red.css('transform','rotate('+now+'deg)'); } });
这基本上创建了一个分离div的假动画，然后在每一步，更新目标div的旋转。
编辑：哎呀！ 错误的参数顺序。 这是一个演示。 http://jsfiddle.net/qZRdZ/
请注意，在1.8.0中，我认为您不需要指定所有供应商前缀。
使用这种方法，你可以动画几乎任何东西，只要你记住，除非编码，否则+=和-=类的东西将无法正常工作。
更新：这是我的解决方案和cuzzea在function背后抽象的解决方案的组合。 http://jsfiddle.net/qZRdZ/206/
$.fn.rotate = function(start, end, duration) { console.log(this); var _this = this; var fakeDiv = $(""); _this.promise().done(function(){ _this.animate({"a":end},{duration:duration}); fakeDiv.css("height", start).animate({ height: end }, { duration: duration, step: function(now) { _this.css("transform", "rotate(" + now + "deg)"); }, complete: function() { fakeDiv.remove(); } }); }); return _this; }; var red = $('.red'); red.click(function() { if ( !$(this).is(':animated') ) { red.rotate(45,135,500); setTimeout(function(){ red.rotate(135,190,500); },750); setTimeout(function(){ red.rotate(190,45,500); },1500); } });
}）;
凯文几乎是核心。 🙂
这是工作jsFiddle。
您不必使用其他元素和高度，您可以执行以下操作：
var red = $('.red'), max_rot = 45, start_from = 90; red.css({a:0}).animate( {'a':1}, { step: function(value,tweenEvent) { rotateVal = start_from + max_rot * value; red.css({ 'transform':'rotate('+rotateVal+'deg)', }); } }, 1000);
想法很简单。 首先，我们创建一个伪造的css属性’a’并将其设置为0，然后我们将其设置为1，这样step函数将为您提供一个0到1的值，您可以使用它来设置自定义变换。
另一种方法是使用jQuery将dom更改为css将响应的内容。
我们可以将我们的CSS设置为这样：
.object { -webkit-transition:all .4s; -moz-transform:all .4s; -o-transform:all .4s; -ms-transform:all .4s; transform:all .4s; } .object[data-rotate="false"] { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } .object[data-rotate="true"] { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); }
我们的jQuery看起来像这样：
$('#trigger').live('click',function(){ if($('.object').attr('data-rotate') = true) { $('.object').attr('data-rotate',false); } else { $('.object').attr('data-rotate', true); } });
显然，浏览器必须支持转换你想要运行的任何动画的能力，所以它的命中或错过取决于动画的类型，但如果你有大量的东西或你有一些东西它更好用你想要同时动画的孩子。
示例小提琴： http ： //jsfiddle.net/ddhboy/9DHDy/1/