Webkit - CSS -Übergangseffekt auf eine Div

StackOverflow https://stackoverflow.com/questions/4559634

Frage

Ich versuche, Fadein/Out -Effekt zu erzielen, wenn ich die Innerhtml eines Divs ändere. Außerdem versuchte es ein Beispiel gegeben bei Safari Doc

Ich möchte, dass der Div ausgeblendet, den Inhalt verändert und dann mit neuen Inhalten wieder verblasst.

<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

War es hilfreich?

Lösung 4

Das habe ich endlich getan. Vielen Dank für die Antworten

init: function(fragment) {
        var c = document.getElementById("c");
        c.addEventListener( 'webkitTransitionEnd', IDR.callHook(c, fragment), false);
        c.setAttribute("class", "cv hide"); 
     },

     callHook: function(c, fragment) {
        var fp = function() {
           c.removeEventListener('webkitTransitionEnd', fp, false);
           c.innerHTML = '';
           c.setAttribute("class", "cv");
           c.appendChild(fragment);
        };
        return fp;
     },

Andere Tipps

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

Ich habe Ihren Code neu geschrieben-siehe http://jsfiddle.net/kai/ec64b/

Ich habe auch einige Klassenmanipulationsfunktionen aufgenommen, die Sie verwenden können.

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

Probieren Sie diesen Code aus. Setzen Sie das Skript vor dem Body Closing Tag, nicht danach.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top