Javascript innerHTML 动画答案

【问题标题】：Javascript innerHTML animationJavascript innerHTML 动画
【发布时间】：2016-05-14 12:37:24
【问题描述】：

我有一个 Javascript 和 HTML 的倒计时。它通过innerHTML工作，我想要在更改innerHTML的值时有一个动画。

倒计时工作完美！

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>

我该怎么做，例如一个 fadeInDown 动画？

谢谢！

【问题讨论】：

标签： javascript html

【解决方案1】：

最简单的方法可能是 JQuery，在 JQuery.com 找到。我在这里也发现了一个类似的问题：jquery animation on div innerhtml on change

至于你的代码，你会想要这样的：

$('#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);
});

请注意，这仅适用于已安装的 JQuery。这方面的说明可以在http://jquery.com/download/找到。

上述说明的简短版本：将以下代码添加到您的 HTML（通常在文档底部附近完成）以包含 JQuery 库

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

【讨论】：

【解决方案2】：

您不能直接为文本节点设置动画。您必须为包装元素设置动画，该元素将动态设置样式值。比如：
<span style="opacity:0;">your content</span>

另外，更改 innerHTML 是对现有元素的完全替换，它会“破坏”父元素内任何正在进行的动画。

【讨论】：