CSS3 + Javascript - Will -ms-transition: opacity 1s easy-in-out; trabajar en IE 10 solo?

He estado jugando con algunos CSS3 + JavaScript hoy.CSS3 + Javascript - Will -ms-transition: opacity 1s easy-in-out; trabajar en IE 10 solo?

Abajo tienes mi código, (estaba tratando de hacer la galería de desvanecimiento de imagen más pequeña del mundo, no sé si lo logré).

No estoy muy seguro de cómo configurar el CSS. Ver preguntas de comentarios a continuación:

-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?

Tal vez más pequeño JS-Galería del mundo:

<!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>

Fuente

2011-12-31 user1087110

Creo que espero que establezca las propiedades de transición específicas del proveedor (moz/o/webkit) también, ya que todos los navegadores modernos han podido hacer transiciones durante años. – Rob

Rob, gracias por tu comentario. No estoy en la orilla, entiendo a qué te refieres. ¿Puedes mostrarme agregándolo al código? – user1087110

Creo que eché de menos que ya tenía los otros proveedores en su ejemplo completo de marcado. Solo miré las dos líneas en la parte superior. – Rob

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

Si Microsoft ha implementado una aplicación específica del proveedor de transition en Internet Explorer, entonces éste será desencadenado por la declaración de propiedad -ms-transition, suponiendo que los argumentos cumplen con la especificación que han implementado.

Can I Use sugiere que IE 10 tiene, de hecho, implementado la propiedad -ms-transition, como lo hace el MSDN entry, aunque es no específica en cuanto a qué versión de Internet Explorer esto se implementa en ...

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

Establecimos esto con el fin de que una vez que la implementación estándar de transition se finalice e implemente, se anulará cualquier implementación provisional específica del proveedor

Fuente

2011-12-31 16:05:11

tl; dr sí, funcionará solo en IE10. – BoltClock

Gracias por la información David! BoltClock, ¿has intentado? (Solo tengo IE9 en mi computadora ...) – user1087110

@ user1087110: [IE10 Test Drive] (https://ie.microsoft.com/testdrive) contiene demostraciones de transiciones CSS3 que se pueden ver en la vista previa de la plataforma IE10. Los dos primeros PP de IE10 se ejecutarán en Windows 7, pero no estoy seguro si todavía están disponibles para descargar ... – BoltClock

Microsoft implementó las versiones prefijo y sin prefijo al mismo tiempo.

Así, por ejemplo su

-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

Ver this jsfiddle en IE10 y verá que ambos trabajan muy bien. Si declara tanto el prefijo como la versión sin prefijo, la segunda declaración tendrá prioridad.

Fuente

2013-12-17 21:53:52

CSS3 + Javascript - Will -ms-transition: opacity 1s easy-in-out; trabajar en IE 10 solo?

Respuesta

Cuestiones relacionadas