CSS3 + Javascript - 将-ms-transition：不透明度1s缓入;单独在IE 10中工作？

今天我一直在玩一些CSS3 + JavaScript。CSS3 + Javascript - 将-ms-transition：不透明度1s缓入;单独在IE 10中工作？

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

我不太清楚如何设置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>

来源

2011-12-31 user1087110

因为所有的现代浏览器都能够转换多年，所以我会认为/希望您会设置供应商特定的转换属性（moz/o/webkit）。 – Rob 2011-12-31 16:19:08

Rob，感谢您的评论。我不是岸我明白你的意思。你可以通过将它添加到代码中显示我吗？ – user1087110 2011-12-31 18:24:39

我想我错过了你已经有其他供应商在你的完整标记的例子。我只看到顶部的两条线。 – Rob 2011-12-31 20:06:27

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

如果微软已实施的transition Internet Explorer中的供应商特定的实现，那么这将是由-ms-transition属性声明触发，假设参数符合他们实现的规范。

Can I Use表明，IE 10，的确，实行-ms-transition财产，一样的MSDN entry，虽然它哪个IE版本，这是在...

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

我们制定实施的非特异性这是为了使transition的标准实现完成并实现后，这将覆盖任何临时供应商特定实现

来源

2011-12-31 16:05:11

tl; dr是的，它只能在IE10中工作。 – BoltClock 2011-12-31 16:08:22

感谢您的信息David！ BoltClock，有没有试过？（我只有IE9使用我的电脑...） – user1087110 2011-12-31 16:11:28

@ user1087110：[IE10测试驱动器]（https://ie.microsoft.com/testdrive）包含可在IE10平台预览中查看的CSS3转换的演示。前两个IE10 PP将在Windows 7上运行，但我不确定它们是否仍然可以下载... – BoltClock 2011-12-31 17:02:48

Microsoft在同一时间实施了前缀和前缀免费版本。

所以对于IE10你的榜样

-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

查看this jsfiddle，你会看到，无论是工作就好了。如果声明前缀和前缀免费版本，则第二个声明将优先。

来源

2013-12-17 21:53:52

CSS3 + Javascript - 将-ms-transition：不透明度1s缓入;单独在IE 10中工作？

回答

相关问题