Javascript innerHTML Animation

Question

Ich habe einen Countdown in Javascript und HTML. Es arbeitet durch innerHTML und ich möchte eine Animation beim Ändern der Werte von innerHTML.

Countdown funktioniert perfekt!

Javascript:

var jahr=2016, monat=5, tag=15, stunde=11, minute=2, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() { 
startDatum=new Date(); // Aktuelles Datum 

if(startDatum<zielDatum) { 
    var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0; 

     while(startDatum<zielDatum) { 
     jahre++; 
     startDatum.setFullYear(startDatum.getFullYear()+1); 
     } 
     startDatum.setFullYear(startDatum.getFullYear()-1); 
     jahre--; 

     while(startDatum<zielDatum) { 
     monate++; 
     startDatum.setMonth(startDatum.getMonth()+1); 
     } 
     startDatum.setMonth(startDatum.getMonth()-1); 
     monate--; 

     while(startDatum.getTime()+(24*60*60*1000)<zielDatum) { 
     tage++; 
     startDatum.setTime(startDatum.getTime()+(24*60*60*1000)); 
     } 

     stunden=Math.floor((zielDatum-startDatum)/(60*60*1000)); 
     startDatum.setTime(startDatum.getTime()+stunden*60*60*1000); 

     minuten=Math.floor((zielDatum-startDatum)/(60*1000)); 
     startDatum.setTime(startDatum.getTime()+minuten*60*1000); 

     sekunden=Math.floor((zielDatum-startDatum)/1000); 

     (jahre!=1)?jahre=jahre+"":jahre=jahre+""; 
     (monate!=1)?monate=monate+"":monate=monate+""; 
     (tage!=1)?tage=tage+"":tage=tage+""; 
     (stunden!=1)?stunden=stunden+"":stunden=stunden+""; 
     (minuten!=1)?minuten=minuten+"":minuten=minuten+""; 
     if(sekunden<10) sekunden="0"+sekunden; 
     (sekunden!=1)?sekunden=sekunden+"":sekunden=sekunden+""; 

     document.getElementById('days').innerHTML = ""+tage+""; 
     document.getElementById('hours').innerHTML = ""+stunden+""; 
     document.getElementById('minutes').innerHTML = ""+minuten+""; 
     document.getElementById('seconds').innerHTML = ""+sekunden+""; 

    if(tage==1){ 
     dayText = "Tag"; 
    } else { 
     dayText = "Tage"; 
    } 

    if(stunden==1){ 
     hoursText = "Stunde"; 
    } else { 
     hoursText = "Stunden"; 
    } 

    if(minuten==1){ 
     minutesText = "Minute"; 
    } else { 
     minutesText = "Minuten"; 
    } 

    if(sekunden==1){ 
     secondsText = "Sekunde"; 
    } else { 
     secondsText = "Sekunden"; 
    } 

    document.getElementById('daysText').innerHTML = ""+dayText+""; 
    document.getElementById('hoursText').innerHTML = ""+hoursText+""; 
    document.getElementById('minutesText').innerHTML = ""+minutesText+""; 
    document.getElementById('secondsText').innerHTML = ""+secondsText+""; 

     setTimeout('countdown()',200); 
    } else { 


    } 
} 

HTML:

<div class="time days"> 
        <div id="days" class="value">00</div> 
        <div id="daysText" class="unit">Days</div> 
       </div> 
       <div class="time hours"> 
        <div id="hours" class="value">00</div> 
        <div id="hoursText" class="unit">Hours</div> 
       </div> 
       <div class="time minutes"> 
        <div id="minutes" class="value">00</div> 
        <div id="minutesText" class="unit">Minutes</div> 
       </div> 
       <div class="time seconds"> 
        <div id="seconds" class="value">00</div> 
        <div id="secondsText" class="unit">Seconds</div> 
       </div> 

Und wie kann ich zum Beispiel tun, eine fadeInDown Animation?

Danke!

Answer 1

Sie können einen Textknoten nicht direkt animieren. Sie müssen ein Umbruchelement animieren, das dynamisch festgelegte Stilwerte aufweist. Etwas wie:
<span style="opacity:0;">your content</span>

Auch innerHTML- Wechsel ist ein vollständiger Ersatz der bestehenden Elemente, wird es „break“ alle laufenden Animationen innerhalb des übergeordneten Elements.

Answer 2

Der einfachste Weg, dies zu tun wäre wahrscheinlich JQuery, gefunden bei JQuery.com. Ich fand auch eine ähnliche Frage hier: jquery animation on div innerhtml on change

Wie für Ihren Code, werden Sie wie etwas wollen:

$('#daysText').fadeOut(1000, function() 
{  
    $(this).html(dayText).fadeIn(1000); 
}); 

$('#hoursText').fadeOut(1000, function() 
{  
    $(this).html(hoursText).fadeIn(1000); 
}); 
$('#minutesText').fadeOut(1000, function() 
{  
    $(this).html(minutesText).fadeIn(1000); 
}); 

$('#secondsText').fadeOut(1000, function() 
{  
    $(this).html(secondsText).fadeIn(1000); 
}); 

Beachten Sie, dass dies nur mit JQuery installiert arbeiten. Anweisungen dazu finden Sie unter http://jquery.com/download/

Kurzfassung der Anleitung zu finden: Fügen Sie den folgenden Code in Ihre HTML (Gemeinhin am unteren Rand des Dokuments durchgeführt) die JQuery Bibliothek

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

enthalten