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

Question

I'm trying to add a text (that is a countdown ) made with JS that works, but only after another text (made with JS) has finished it's animation, but I'm struggling with it. I've tried some methods but nothing worked for me, I'm new but I'm a quick learner.

Can someone help me out?

Here is a part of my code:

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> 

Thanks

Answer 1

There is animation callbacks:

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

Answer 2

UPDATE: First, the problem is with your CSS styles for the countdown paragraph . You set the paragraph color to white and since your body is white as well, that's why you never see the countdown. But if you change the color to black for instance, you'll see your countdown.

Second, I added an animationend event to your fade element and put the setInterval inside it.

Here is the CSS you need to change:

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

And here is the 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 ";

});

 });

I removed the part where you check for distance just because it had nothing to do with what you asked for help. You can add it though.

But here is the working fiddle https://jsfiddle.net/fwxL1sj4/33/