我今天一直在玩一些 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 画廊：
<!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>
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
如果 Microsoft 已实施特定于供应商的实施transition在 Internet Explorer 中，这将由-ms-transition属性声明，假设参数满足它们已实现的规范。
我可以用吗 http://caniuse.com/#search=transition表明 IE 10 确实实现了-ms-transition财产，就像MSDN条目 http://msdn.microsoft.com/en-us/library/windows/apps/hh466382.aspx，尽管它没有具体说明这是在哪个版本的 IE 中实现的......
transition:opacity 1s ease-in-out; // Why do we set this?
我们这样设置是为了一旦标准实施transition已最终确定并实施，这将覆盖任何临时供应商特定的实施
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
