CSS3 + Javascript - Will -ms-transition: непрозрачность 1s, легкость выхода; работать в IE 10 в одиночку? - PullRequest
Новая
       29

CSS3 + Javascript - Will -ms-transition: непрозрачность 1s, легкость выхода; работать в IE 10 в одиночку?

6 голосов
/ 31 декабря 2011

Сегодня я немного поигрался с 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>

Ответы [ 2 ]

9 голосов
/ 31 декабря 2011 
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?

Если Microsoft реализовала специфичную для поставщика реализацию transition в Internet Explorer, то это будет вызвано объявлением свойства -ms-transition, при условии, что аргументы соответствуют спецификации, которую они реализовали.

Могу ли я использовать предполагает, что IE 10 действительно реализовал свойство -ms-transition, так же как и запись MSDN , хотя она не является конкретной для какой версии IE это реализовано в ... 

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

Мы установили это для того, чтобы после того, как стандартная реализация transition была завершена и реализована, она переопределит любые временные реализации, специфичные для поставщика

7 голосов
/ 18 декабря 2013

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

Просмотр этого jsfiddle в IE10, и вы увидите, что оба прекрасно работают. Если вы объявите как префикс, так и версию без префикса, второе объявление будет иметь приоритет.

...