webkit - css Übergangseffekt auf einem div

Ich versuche, FadeIn/Out-Effekt tun, wenn ich innerHTML eines div ändern. Selbst versucht Beispiel bei safari doc webkit - css Übergangseffekt auf einem div

Ich möchte das Div auszublenden, ändern Sie den Inhalt und dann wieder mit neuen Inhalten einblendet.

<style> 
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;} 
.cf {opacity: 0;} 
</style> 
<body> 
<div id="main"> 
    <div id="c"> OLD </div> 
</div> 
</body> 
<script> 
var c = document.getElementById("c"); 
c.setAttribute("class", "cf"); 
c.innerHTML = ''; 
c.appendChild(fragment); 
c.setAttribute("class", "cv"); 
</script>

Bitte helfen Sie mir hier

Quelle

2010-12-30 Vjy

Haben Sie 'fragment' woanders definiert? Wenn nicht, dann wird nichts an "c" angehängt, wodurch möglicherweise ein JavaScript-Fehler erzeugt wird und die Codeausführung angehalten wird. –

Sie wollen, dass es ausblendet, den Inhalt ändert und dann wieder einblendet? –

Ja, ich möchte das div ausblenden, den Inhalt ändern und dann wieder mit neuem Inhalt einblenden – Vjy

Dies ist, was ich endlich beendet habe. Vielen Dank für die Antworten

Quelle

2010-12-31 17:50:16 Vjy

<style> 
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;} 
/* .cf {opacity: 0;} */ 
</style> 
<body> 
<div id="main"> 
    <div id="c"> OLD </div> 
</div> 
<script> 
var c = document.getElementById("c"); 
c.setAttribute("class", "cf"); 
// c.innerHTML = ''; 
// c.appendChild(fragment); 
c.setAttribute("class", "cv"); 
</script> 
</body>

diesen Code ausprobieren. Setzen Sie das Skript vor den Tag, nicht nach dem Tag.

Quelle

2010-12-30 03:56:01

das ist nicht was ich will – Vjy

<style> 
.cv { opacity:1; background-color: #eee; -webkit-transition: all 1s ease-in-out;} 
.cv.hide {opacity: 0;} 
</style> 

[...] 

<script> 
c.setAttribute("class", "cv hide"); 
[...] 
c.setAttribute("class", "cv"); 
</script>

Quelle

2010-12-30 15:33:47 kioopi

ich neu geschrieben Code - siehe http://jsfiddle.net/Kai/ec64b/

Ich habe auch einige Klassen Manipulation Funktionen enthalten, damit Sie verwenden.

Quelle

2010-12-30 15:54:50 Kai

webkit - css Übergangseffekt auf einem div

Antwort

Verwandte Themen