[英]CSS3 + Javascript - Will -ms-transition:opacity 1s ease-in-out; work in IE 10 alone?
我今天一直在玩一些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>
-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
的標准實現,這將覆蓋任何臨時特定於供應商的實現
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 ,你會發現兩者都工作正常。 如果同時聲明前綴和無前綴版本,則第二個聲明將優先。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.