添加文字动画结束后的js

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

更新：首先，问题是你的CSS样式倒计时段。您段落颜色设置为白色，因为你的身体是白色为好，这就是为什么你从来没有看到倒计时。但是，如果你改变颜色为黑色，例如，你会看到你的倒计时。

其次，我添加了一个animationend事件到您的褪色元素，并把setInterval的里面。

以下是你需要更改CSS：

#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;
}

这里是JavaScript：

// Set the date we're counting down to
var countDownDate = new Date("Feb 1, 2019 11:59:20").getTime();

// Add text to <h1 id="fade">
var comingSoon = document.getElementById("fade");
comingSoon.innerHTML = 'COMING SOON';

comingSoon.addEventListener('animationend', ()=>{


// 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 ";

});

 });

我删除了，你检查的距离，只是因为它有没有关系你问什么帮助的部分。你可以尽管添加。

但这里是工作提琴https://jsfiddle.net/fwxL1sj4/33/

Answer 2

有动画回调：

function callFunction(){

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