CSS3和x2B；Javascript-Will-ms转换：不透明度1s易于输入输出；单独在IE 10中工作？_Javascript_Css_Transitions

CSS3和x2B；Javascript-Will-ms转换：不透明度1s易于输入输出；单独在IE 10中工作？

javascript css

CSS3和x2B；Javascript-Will-ms转换：不透明度1s易于输入输出；单独在IE 10中工作？,javascript,css,transitions,Javascript,Css,Transitions,今天我一直在玩一些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画廊： <!D

今天我一直在玩一些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>


HB-CSS3+JS画廊
正文{边距：0；文本对齐：居中；字体：200px/500px}
#g{background:#000；边距：0自动；宽度：960px；高度：500px；溢出：隐藏}
#g组{
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
-ms转换：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
不透明度：0；位置：绝对；高度：500px；宽度：960px；}
1.
2.
3.
4.
函数i（）{c[a].style.opacity='1'}函数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（）；设定间隔（f，4000）；

如果Microsoft已在Internet Explorer中实施了特定于供应商的

转换实现

，则这将由

-ms transition

属性声明触发，前提是参数符合其实施的规范

这表明IE 10确实实现了

-ms transition

属性，正如所实现的一样，尽管没有具体说明在哪个版本的IE中实现了该属性

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

我们将此设置为，一旦

转换的标准实施完成并实施，这将覆盖任何临时供应商特定实施
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中查看，您将看到这两种方法都可以正常工作。如果同时声明前缀和无前缀版本，则第二个声明将优先 谢谢你的信息，大卫！BoltClock，yoiu试过了吗？（我的电脑上只有IE9 opn…@user1087110：包含CSS3转换的演示，可以在IE10平台预览中查看。前两个IE10 PPs将在Windows 7上运行，但我不确定它们是否仍然可以下载…我认为/希望您也可以设置特定于供应商的转换属性（moz/o/webkit），因为所有现代浏览器已经能够进行转换多年。Rob，感谢您的评论。我不在岸上，我明白你的意思。您可以通过将其添加到代码中来向我展示吗？我想我没有注意到您的完整标记示例中已经有了其他供应商。我只看了上面的两行。
-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