CSS3 + Javascript - 将-ms-transition：opacity 1s easy-in-out; 仅在IE 10中工作？

Question

我今天一直在玩一些CSS3 + JavaScript。

下面你有我的代码，（试图制作世界上最小的图像淡入画廊，不知道我是否成功）。

我不太确定如何设置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?

也许是世界上最小的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>

Answer 1

-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?

如果Microsoft在Internet Explorer中实现了特定于供应商的transition实现，那么这将由-ms-transition属性声明触发，假设参数符合它们已实现的规范。

我可以使用建议IE 10确实实现了-ms-transition属性， MSDN条目也是如此，尽管它在哪个版本的IE中实现了非......

transition:opacity 1s ease-in-out; // Why do we set this?

我们设置此项以便一旦完成并实现transition的标准实现，这将覆盖任何临时特定于供应商的实现

Answer 2

Microsoft同时实现了前缀和无前缀的版本。

所以对你的例子

-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

在IE10中查看这个jsfiddle ，你会发现两者都工作正常。 如果同时声明前缀和无前缀版本，则第二个声明将优先。

CSS3 + Javascript - 将-ms-transition：opacity 1s easy-in-out; 仅在IE 10中工作？

问题描述

2 个解决方案

解决方案1
9 已采纳 2011-12-31 16:05:11

解决方案2
7 2013-12-17 21:53:52

CSS3 + Javascript - 将-ms-transition：opacity 1s easy-in-out; 仅在IE 10中工作？

问题描述

2 个解决方案

解决方案1 9 已采纳 2011-12-31 16:05:11

解决方案2 7 2013-12-17 21:53:52

解决方案1
9 已采纳 2011-12-31 16:05:11

解决方案2
7 2013-12-17 21:53:52