CSS3 + Javascript - 将 -ms-transition:opacity 1s 缓入缓出；单独在 IE 10 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8689071/
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 + Javascript - Will -ms-transition:opacity 1s ease-in-out; work in IE 10 alone?
提问by user1087110
I have been playing around with some CSS3 + JavaScript today.
我今天一直在玩一些 CSS3 + JavaScript。
Below you have my code, (was trying to make the world's smallest image fading gallery, don't know if I succeeded).
下面是我的代码，（正在尝试制作世界上最小的图像褪色画廊，不知道是否成功）。
I am not quite sure how to set the CSS though. See comment questions below:
我不太确定如何设置 CSS。请参阅下面的评论问题：
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
transition:opacity 1s ease-in-out; // Why do we set this?
Maybe the world's smallest JS-Gallery:
也许是世界上最小的 JS-Gallery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HB - CSS3 + JS Gallery</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;text-align:center;font:200px/500px georgia}
#g{background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden}
#g div{
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:0;position:absolute;height:500px;width:960px;}
</style>
</head>
<body>
<div id="g">
<div style="background:#090">1</div>
<div style="background:#096">2</div>
<div style="background:#963">3</div>
<div style="background:#CC0">4</div>
</div>
<script>
function i(){c[a].style.opacity='1'}function o(){c[a].style.opacity='0'}var g=document.getElementById('g'),c=g.children,l=c.length-1,f=function(){if(a==l){o();a=0;i()}else{o();a++;i()}};a=0;i();setInterval(f,4000);
</script>
</body>
</html>
回答by David says reinstate Monica
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
If Microsoft have implemented a vendor-specific implementation of transitionin Internet Explorer then this will be triggered by the -ms-transitionproperty declaration, assuming that the arguments meet the specification they've implemented.
如果 Microsofttransition在 Internet Explorer 中实现了特定于供应商的实现，那么这将由-ms-transition属性声明触发，假设参数符合它们已实现的规范。
Can I Usesuggests that IE 10 has, indeed, implemented the -ms-transitionproperty, as does the MSDN entry, though it's non-specific as to which version of IE this is implemented in...
Can I Use表明 IE 10 确实实现了该-ms-transition属性，就像MSDN 条目一样，尽管它不具体说明这是在哪个版本的 IE 中实现的...
transition:opacity 1s ease-in-out; // Why do we set this?
We set this in order that once the standard implementation of transitionis finalised and implemented this will override any interim vendor-specific implementations
我们设置它是为了一旦transition最终确定并实施的标准实施，这将覆盖任何临时供应商特定实施
回答by frank hadder
Microsoft implemented the prefix and prefix-free versions at the same time.
微软同时实现了前缀和无前缀版本。
So for your example
所以对于你的例子
-ms-transition:opacity 1s ease-in-out; // This will never be used because,
transition:opacity 1s ease-in-out; // This line will always overwrite it
View this jsfiddlein IE10 and you'll see that both work just fine. If you declare both the prefix and the prefix-free version, the second declaration will take precedence.
在 IE10 中查看这个 jsfiddle，你会发现两者都工作得很好。如果您同时声明前缀和无前缀版本，则第二个声明将优先。
