CSS3 + Javascript - ms-transition:opacity 1s ease-in-out; funktioniert im IE 10 allein?
Ich habe das Spiel mit einigen CSS3 + JavaScript heute.
Nachfolgend mein code (war der Versuch zu machen, das weltweit kleinste Bild fading gallery, weiß nicht, ob es mir gelungen ist).
Ich bin nicht ganz sicher, wie die CSS-obwohl. Siehe Kommentar unten stehenden Fragen:
-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?
Vielleicht das weltweit kleinste JS-Galerie:
<!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>
Ich würde denken/hoffen, dass Sie würde sein Einstellung die vendor specific transition Eigenschaften (moz/a/webkit), da alle modernen Browser in der Lage gewesen zu tun übergänge für die Jahre.
Rob, vielen Dank für Ihren Kommentar. Ich bin nicht Ufer ich versteht, was du meinst. Können Sie mir zeigen, indem es den code?
Ich glaube, ich verpasst, dass Sie schon bei den anderen Anbietern in Ihrer vollständigen markup-Beispiel. Ich nur sah die beiden Linien an der Spitze.
Rob, vielen Dank für Ihren Kommentar. Ich bin nicht Ufer ich versteht, was du meinst. Können Sie mir zeigen, indem es den code?
Ich glaube, ich verpasst, dass Sie schon bei den anderen Anbietern in Ihrer vollständigen markup-Beispiel. Ich nur sah die beiden Linien an der Spitze.
InformationsquelleAutor user1087110 | 2011-12-31
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Microsoft umgesetzt haben, ist eine Hersteller-spezifische Implementierung von
transition
im Internet Explorer wird dies ausgelöst durch die-ms-transition
Eigenschaft Erklärung, vorausgesetzt, dass die Argumente, die die Anforderungen der technischen Spezifikationen, die Sie implementiert haben.Kann Ich Die Verwenden schlägt vor, dass der IE 10 hat, in der Tat, umgesetzt der
-ms-transition
Eigenschaft, wie die MSDN Eintrag, obwohl es nicht-spezifische, welche version des IE diese umgesetzt wird...Setzen wir dies um, sobald die standard-Implementierung von
transition
ist abgeschlossen und umgesetzt werden, dies überschreibt jede interim Hersteller-spezifische ImplementierungenDanke für die info David! BoltClock, haben yoiu versucht? (Ich habe nur IE9 opn meinem computer...)
IE10 Test Drive enthält demos von CSS3-übergänge, die angezeigt werden kann, in die IE10 platform preview. Die ersten beiden IE10 PPs läuft auf Windows 7, aber ich bin mir nicht sicher, ob Sie noch zum download zur Verfügung...
Dank BoltClock. Check it out...
InformationsquelleAutor David Thomas
Microsoft implementiert das prefix und prefix-free-Versionen zur gleichen Zeit.
Also für dein Beispiel
Ansicht dieses jsfiddle in IE10 und Sie werden sehen, dass beide gut funktionieren. Wenn Sie erklären sowohl die Präfix-und die Präfix-freie version, die zweite Deklaration Vorrang.
InformationsquelleAutor frank hadder