Question

我正在尝试添加一个可以使用JS制作的文本（倒计时），但是只有在另一个文本（用JS制作）完成动画之后，我才努力工作。我尝试了一些方法，但对我没有任何帮助，我是新手，但是我是一个快速学习者。

有人可以帮我吗？

这是我的代码的一部分：

HTML

// Set the date we're counting down to
var countDownDate = new Date("Feb 1, 2019 11:59:20").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="countdown"
  document.getElementById("countdown").innerHTML = days + " days left " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Add text to <h1 id="fade">
  var comingSoon = document.getElementById("fade");
  comingSoon.innerHTML = 'COMING SOON';

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    //document.getElementById("countdown").innerHTML = "Well.. what are you waiting for?";
    // If countdown finished, remove the <p id="countdown">
      var parent = document.getElementById("comingSoonContainer");
      var child = document.getElementById("countdown");
      parent.removeChild(child);

    // Create new <p> with text
      var para = document.createElement("p");
      var node = document.createTextNode("New Paragraph works fine.");
      para.appendChild(node);

      var element = document.getElementById("comingSoonContainer");
      element.appendChild(para);

      // Replace <h1> with text
      para = document.createElement("h1");
      node = document.createTextNode("Enjoooooy !!");
      para.appendChild(node);

      parent = document.getElementById("comingSoonContainer");
      child = document.getElementById("fade");
      parent.replaceChild(para, child);

    //document.getElementById("fade").innerHTML = "Enjoy !!";
  }

}, 1000);

#countdown {
    font-family: 'Raleway', sans-serif;
    font-size: /*1.3em;*/ 3em;
    color: #ffffff;
    /*including fade animation*/
    -webkit-animation-name: fade;
      -webkit-animation-duration: 12s;
      animation-name: fade;
      animation-duration: 12s;
}

    /* Fade animation */
    #fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 8s;
      animation-name: fade;
      animation-duration: 8s;
    }

    @-webkit-keyframes fade {
      from {opacity: .0} 
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .0} 
      to {opacity: 1}
    }

    <div id="comingSoonContainer"> 
    		<h1 id="fade"></h1>
    		<p id="countdown"></p>
    
    	</div>

谢谢

Answer 1

有动画回调：

function callFunction(){

}
var element=document.getElementById('fade');
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("onaimationend", callfunction,false);

Answer 2

更新：首先，问题在于您的CSS样式的countdown段落。您将段落颜色设置为白色，并且由于您的身体也是白色的，所以这就是您从未看到倒数的原因。但是，例如，如果您将颜色更改为黑色，则会看到倒数计时。

第二，我向您的衰落元素添加了animationend事件，并将setInterval放入其中。

这是您需要更改的CSS：

<select name="" id="dropdown"></select>

这是JavaScript：

#countdown {
    font-family: 'Raleway', sans-serif;
    font-size: /*1.3em;*/ 3em;
    color: #000;                      // Color was #ffffff
    /*including fade animation*/
    -webkit-animation-name: fade;
      -webkit-animation-duration: 12s;
      animation-name: fade;
      animation-duration: 12s;
}

我删除了您检查距离的部分，因为它与您寻求帮助的内容无关。您可以添加它。

但这是工作中的小提琴 https://jsfiddle.net/fwxL1sj4/33/

动画结束后使用js添加文本

2 个答案: