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

Oggi gioco con alcuni CSS3 + JavaScript.CSS3 + Javascript - Will -ms-transition: opacity 1s easy-in-out; lavoro solo in IE 10?

In basso hai il mio codice, (cercavo di creare la galleria di dissolvenza dell'immagine più piccola al mondo, non so se ci sono riuscito).

Non sono abbastanza sicuro di come impostare il CSS. Vedere commento domande qui sotto:

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

Forse più piccolo JS-Gallery del mondo:

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

fonte

2011-12-31 user1087110

Penso che spero di impostare le proprietà di transizione specifiche del fornitore (moz/o/webkit) poiché tutti i browser moderni sono stati in grado di eseguire le transizioni per anni. – Rob

Rob, grazie per il tuo commento. Non sono a terra, capisco cosa intendi. Puoi mostrarmi aggiungendolo al codice? – user1087110

Immagino di essermi perso il fatto che tu avessi già gli altri fornitori nel tuo esempio di markup completo. Ho solo guardato le due righe in alto. – Rob

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

Se Microsoft ha implementato un'implementazione specifico del fornitore di transition in Internet Explorer allora questo sarà innescato dalla dichiarazione di proprietà -ms-transition, assumendo che gli argomenti soddisfino le specifiche che hanno implementato.

Can I Use suggerisce che IE 10 ha, infatti, realizzato la proprietà -ms-transition, come fa il MSDN entry, anche se è non specifica su quale versione di IE questo è implementato in ...

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

Abbiamo impostato questo per fare in modo che una volta completata e implementata l'implementazione standard di transition sostituirà eventuali implementazioni specifiche del fornitore intermedio

fonte

2011-12-31 16:05:11

tl; dr si funzionerà solo in IE10. – BoltClock

Grazie per le informazioni David! BoltClock, hai provato? (Ho solo IE9 sul mio computer ...) – user1087110

@ user1087110: The [IE10 Test Drive] (https://ie.microsoft.com/testdrive) contiene demo di transizioni CSS3 che possono essere visualizzate nell'anteprima della piattaforma IE10. I primi due PP IE10 gireranno su Windows 7, ma non sono sicuro che siano ancora disponibili per il download ... – BoltClock

Microsoft ha implementato le versioni con prefisso e senza prefisso allo stesso tempo.

Così, per il tuo esempio

-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

View this jsfiddle in IE10 e vedrete che entrambi funzionano bene. Se dichiari sia il prefisso che la versione senza prefisso, la seconda dichiarazione avrà la precedenza.

fonte

2013-12-17 21:53:52

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

risposta

Problemi correlati