jQuery .css() 中的 CSS3 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10237731/
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
CSS3 transitions inside jQuery .css()
提问by Scott B
When I add the transition line into my code it breaks jQuery. How can I fix it?
当我将过渡线添加到我的代码中时，它会破坏 jQuery。我该如何解决？
a(this).next().css({
left: c,
transition: 'opacity 1s ease-in-out'
});
I'm trying to set up a fade from one div to the next inside a slider
我正在尝试在滑块内设置从一个 div 到下一个 div 的淡入淡出
回答by Jasper
Step 1)Remove the semi-colon, it's an object you're creating...
步骤 1)删除分号，它是您正在创建的对象...
a(this).next().css({
left : c,
transition : 'opacity 1s ease-in-out';
});
to
到
a(this).next().css({
left : c,
transition : 'opacity 1s ease-in-out'
});
Step 2)Vendor-prefixes... no browsers use transitionsince it's the standard and this is an experimental feature even in the latest browsers:
步骤 2)供应商前缀...没有浏览器使用，transition因为它是标准的，即使在最新的浏览器中，这也是一个实验性功能：
a(this).next().css({
left : c,
WebkitTransition : 'opacity 1s ease-in-out',
MozTransition : 'opacity 1s ease-in-out',
MsTransition : 'opacity 1s ease-in-out',
OTransition : 'opacity 1s ease-in-out',
transition : 'opacity 1s ease-in-out'
});
Here is a demo: http://jsfiddle.net/83FsJ/
这是一个演示：http: //jsfiddle.net/83FsJ/
Step 3)Better vendor-prefixes... Instead of adding tons of unnecessary CSS to elements (that will just be ignored by the browser) you can use jQuery to decide what vendor-prefix to use:
第 3 步）更好的供应商前缀......您可以使用 jQuery 来决定使用哪个供应商前缀，而不是向元素添加大量不必要的 CSS（浏览器会忽略这些）：
$('a').on('click', function () {
var myTransition = ($.browser.webkit) ? '-webkit-transition' :
($.browser.mozilla) ? '-moz-transition' :
($.browser.msie) ? '-ms-transition' :
($.browser.opera) ? '-o-transition' : 'transition',
myCSSObj = { opacity : 1 };
myCSSObj[myTransition] = 'opacity 1s ease-in-out';
$(this).next().css(myCSSObj);
});?
Here is a demo: http://jsfiddle.net/83FsJ/1/
这是一个演示：http: //jsfiddle.net/83FsJ/1/
Also note that if you specify in your transitiondeclaration that the property to animate is opacity, setting a leftproperty won't be animated.
另请注意，如果您在transition声明中指定要进行动画处理的属性为opacity，left则不会对属性进行动画设置。
回答by ROFLwTIME
Your code can get messy fast when dealing with CSS3 transitions. I would recommend using a plugin such as jQuery Transitthat handles the complexity of CSS3 animations/transitions.
在处理 CSS3 转换时，您的代码可能会很快变得混乱。我建议使用一个插件，比如jQuery Transit，它可以处理 CSS3 动画/过渡的复杂性。
Moreover, the plugin uses webkit-transform rather than webkit-transition, which allows for mobile devices to use hardware acceleration in order to give your web apps that native look and feel when the animations occur.
此外，该插件使用 webkit-transform 而不是 webkit-transition，它允许移动设备使用硬件加速，以便在动画发生时为您的 Web 应用程序提供原生的外观和感觉。
Javascript:
Javascript：
$("#startTransition").on("click", function()
{
if( $(".boxOne").is(":visible"))
{
$(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
$(".boxTwo").css({ x: '100%' });
$(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
return;
}
$(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
$(".boxOne").css({ x: '100%' });
$(".boxOne").show().transition({ x: '0%', opacity: 1.0 });
});
Most of the hard work of getting cross-browser compatibility is done for you as well and it works like a charm on mobile devices.
获得跨浏览器兼容性的大部分艰苦工作也是为您完成的，它在移动设备上就像一种魅力。
