如何在不重新启动 CSS 动画的情况下使用 javascript 更改 html？

Question

So I came across this cool color transition that I like:

https://codepen.io/jason-hamje/pen/pobZRjK

and I found a timer script that seems to work well:

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's 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="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

https://codepen.io/jason-hamje/pen/mdEjRWW

But I'm struggling to combine the two. This is the closest I've come:

https://codepen.io/jason-hamje/pen/rNLrjmb

It plays the animation but restarts every time the second changes. I think the problem is that changing the innerHTML of an element basically makes CSS think it's a whole new element?

I am a nearly-complete scrub when it comes to frontend so I'm feeling pretty lost here. I was kind of surprised that I couldn't seem to find a similar question already asked (though that's likely because I don't know enough about frontend to know how to ask it properly).

My gut tells me that if I'm truly determined to make this work then I should just handle all of the color transitions directly in javascript, instead of trying to make a javascript loop interact with a CSS animation. However, I figure there's a good chance that there's a simple fix, so I thought I'd post here. Any thoughts?

Answer 1

You were really close. The problem was that you were creating new elements for each character in your timer, and that tells the browser to re-render them re-setting the animation timer. Add on single element in the HTML at the beginning, and change its contents to the timer value.

 // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's 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); var timer = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; //var chars = $.trim(timer).split(""); //var container = document.getElementById("demo") var container = document.querySelector("#demo"); container.querySelector("span").innerHTML = timer; //container.innerHTML = '<span>' + chars.join('</span><span>') + '</span>'; setTimeout(function(){ container.classList.remove('pre-animation') },100) // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);

 /* * Animation module with all animation code */ @import url(https://fonts.googleapis.com/css?family=Ubuntu:300); .anim-text-flow, .anim-text-flow-hover:hover { /* * Animation variables */ /* * Elements settings */ /* * Keyframe loop */ /* * Element animation delay loop */ } .anim-text-flow span, .anim-text-flow-hover:hover span { -webkit-animation-name: anim-text-flow-keys; animation-name: anim-text-flow-keys; -webkit-animation-duration: 50s; animation-duration: 50s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes anim-text-flow-keys { 0% { color: #69c9bc; } 5% { color: #6e7ec4; } 10% { color: #73b2bf; } 15% { color: #a965cd; } 20% { color: #67cbc6; } 25% { color: #8a77bb; } 30% { color: #6278d0; } 35% { color: #ac70c2; } 40% { color: #6b5dd5; } 45% { color: #ad67cb; } 50% { color: #6cc69c; } 55% { color: #70a9c2; } 60% { color: #5f5fd3; } 65% { color: #a575bd; } 70% { color: #cd65c1; } 75% { color: #6e7bc4; } 80% { color: #ba5cd6; } 85% { color: #62aad0; } 90% { color: #6a86c8; } 95% { color: #68cabf; } 100% { color: #9f5cd6; } } @keyframes anim-text-flow-keys { 0% { color: #69c9bc; } 5% { color: #6e7ec4; } 10% { color: #73b2bf; } 15% { color: #a965cd; } 20% { color: #67cbc6; } 25% { color: #8a77bb; } 30% { color: #6278d0; } 35% { color: #ac70c2; } 40% { color: #6b5dd5; } 45% { color: #ad67cb; } 50% { color: #6cc69c; } 55% { color: #70a9c2; } 60% { color: #5f5fd3; } 65% { color: #a575bd; } 70% { color: #cd65c1; } 75% { color: #6e7bc4; } 80% { color: #ba5cd6; } 85% { color: #62aad0; } 90% { color: #6a86c8; } 95% { color: #68cabf; } 100% { color: #9f5cd6; } } .anim-text-flow span:nth-of-type(1), .anim-text-flow-hover:hover span:nth-of-type(1) { -webkit-animation-delay: -19.8s; animation-delay: -19.8s; } .anim-text-flow span:nth-of-type(2), .anim-text-flow-hover:hover span:nth-of-type(2) { -webkit-animation-delay: -19.6s; animation-delay: -19.6s; } .anim-text-flow span:nth-of-type(3), .anim-text-flow-hover:hover span:nth-of-type(3) { -webkit-animation-delay: -19.4s; animation-delay: -19.4s; } .anim-text-flow span:nth-of-type(4), .anim-text-flow-hover:hover span:nth-of-type(4) { -webkit-animation-delay: -19.2s; animation-delay: -19.2s; } .anim-text-flow span:nth-of-type(5), .anim-text-flow-hover:hover span:nth-of-type(5) { -webkit-animation-delay: -19s; animation-delay: -19s; } .anim-text-flow span:nth-of-type(6), .anim-text-flow-hover:hover span:nth-of-type(6) { -webkit-animation-delay: -18.8s; animation-delay: -18.8s; } .anim-text-flow span:nth-of-type(7), .anim-text-flow-hover:hover span:nth-of-type(7) { -webkit-animation-delay: -18.6s; animation-delay: -18.6s; } .anim-text-flow span:nth-of-type(8), .anim-text-flow-hover:hover span:nth-of-type(8) { -webkit-animation-delay: -18.4s; animation-delay: -18.4s; } .anim-text-flow span:nth-of-type(9), .anim-text-flow-hover:hover span:nth-of-type(9) { -webkit-animation-delay: -18.2s; animation-delay: -18.2s; } .anim-text-flow span:nth-of-type(10), .anim-text-flow-hover:hover span:nth-of-type(10) { -webkit-animation-delay: -18s; animation-delay: -18s; } .anim-text-flow span:nth-of-type(11), .anim-text-flow-hover:hover span:nth-of-type(11) { -webkit-animation-delay: -17.8s; animation-delay: -17.8s; } .anim-text-flow span:nth-of-type(12), .anim-text-flow-hover:hover span:nth-of-type(12) { -webkit-animation-delay: -17.6s; animation-delay: -17.6s; } .anim-text-flow span:nth-of-type(13), .anim-text-flow-hover:hover span:nth-of-type(13) { -webkit-animation-delay: -17.4s; animation-delay: -17.4s; } .anim-text-flow span:nth-of-type(14), .anim-text-flow-hover:hover span:nth-of-type(14) { -webkit-animation-delay: -17.2s; animation-delay: -17.2s; } .anim-text-flow span:nth-of-type(15), .anim-text-flow-hover:hover span:nth-of-type(15) { -webkit-animation-delay: -17s; animation-delay: -17s; } .anim-text-flow span:nth-of-type(16), .anim-text-flow-hover:hover span:nth-of-type(16) { -webkit-animation-delay: -16.8s; animation-delay: -16.8s; } .anim-text-flow span:nth-of-type(17), .anim-text-flow-hover:hover span:nth-of-type(17) { -webkit-animation-delay: -16.6s; animation-delay: -16.6s; } .anim-text-flow span:nth-of-type(18), .anim-text-flow-hover:hover span:nth-of-type(18) { -webkit-animation-delay: -16.4s; animation-delay: -16.4s; } .anim-text-flow span:nth-of-type(19), .anim-text-flow-hover:hover span:nth-of-type(19) { -webkit-animation-delay: -16.2s; animation-delay: -16.2s; } .anim-text-flow span:nth-of-type(20), .anim-text-flow-hover:hover span:nth-of-type(20) { -webkit-animation-delay: -16s; animation-delay: -16s; } .anim-text-flow span:nth-of-type(21), .anim-text-flow-hover:hover span:nth-of-type(21) { -webkit-animation-delay: -15.8s; animation-delay: -15.8s; } .anim-text-flow span:nth-of-type(22), .anim-text-flow-hover:hover span:nth-of-type(22) { -webkit-animation-delay: -15.6s; animation-delay: -15.6s; } .anim-text-flow span:nth-of-type(23), .anim-text-flow-hover:hover span:nth-of-type(23) { -webkit-animation-delay: -15.4s; animation-delay: -15.4s; } .anim-text-flow span:nth-of-type(24), .anim-text-flow-hover:hover span:nth-of-type(24) { -webkit-animation-delay: -15.2s; animation-delay: -15.2s; } .anim-text-flow span:nth-of-type(25), .anim-text-flow-hover:hover span:nth-of-type(25) { -webkit-animation-delay: -15s; animation-delay: -15s; } .anim-text-flow span:nth-of-type(26), .anim-text-flow-hover:hover span:nth-of-type(26) { -webkit-animation-delay: -14.8s; animation-delay: -14.8s; } .anim-text-flow span:nth-of-type(27), .anim-text-flow-hover:hover span:nth-of-type(27) { -webkit-animation-delay: -14.6s; animation-delay: -14.6s; } .anim-text-flow span:nth-of-type(28), .anim-text-flow-hover:hover span:nth-of-type(28) { -webkit-animation-delay: -14.4s; animation-delay: -14.4s; } .anim-text-flow span:nth-of-type(29), .anim-text-flow-hover:hover span:nth-of-type(29) { -webkit-animation-delay: -14.2s; animation-delay: -14.2s; } .anim-text-flow span:nth-of-type(30), .anim-text-flow-hover:hover span:nth-of-type(30) { -webkit-animation-delay: -14s; animation-delay: -14s; } .anim-text-flow span:nth-of-type(31), .anim-text-flow-hover:hover span:nth-of-type(31) { -webkit-animation-delay: -13.8s; animation-delay: -13.8s; } .anim-text-flow span:nth-of-type(32), .anim-text-flow-hover:hover span:nth-of-type(32) { -webkit-animation-delay: -13.6s; animation-delay: -13.6s; } .anim-text-flow span:nth-of-type(33), .anim-text-flow-hover:hover span:nth-of-type(33) { -webkit-animation-delay: -13.4s; animation-delay: -13.4s; } .anim-text-flow span:nth-of-type(34), .anim-text-flow-hover:hover span:nth-of-type(34) { -webkit-animation-delay: -13.2s; animation-delay: -13.2s; } .anim-text-flow span:nth-of-type(35), .anim-text-flow-hover:hover span:nth-of-type(35) { -webkit-animation-delay: -13s; animation-delay: -13s; } .anim-text-flow span:nth-of-type(36), .anim-text-flow-hover:hover span:nth-of-type(36) { -webkit-animation-delay: -12.8s; animation-delay: -12.8s; } .anim-text-flow span:nth-of-type(37), .anim-text-flow-hover:hover span:nth-of-type(37) { -webkit-animation-delay: -12.6s; animation-delay: -12.6s; } .anim-text-flow span:nth-of-type(38), .anim-text-flow-hover:hover span:nth-of-type(38) { -webkit-animation-delay: -12.4s; animation-delay: -12.4s; } .anim-text-flow span:nth-of-type(39), .anim-text-flow-hover:hover span:nth-of-type(39) { -webkit-animation-delay: -12.2s; animation-delay: -12.2s; } .anim-text-flow span:nth-of-type(40), .anim-text-flow-hover:hover span:nth-of-type(40) { -webkit-animation-delay: -12s; animation-delay: -12s; } .anim-text-flow span:nth-of-type(41), .anim-text-flow-hover:hover span:nth-of-type(41) { -webkit-animation-delay: -11.8s; animation-delay: -11.8s; } .anim-text-flow span:nth-of-type(42), .anim-text-flow-hover:hover span:nth-of-type(42) { -webkit-animation-delay: -11.6s; animation-delay: -11.6s; } .anim-text-flow span:nth-of-type(43), .anim-text-flow-hover:hover span:nth-of-type(43) { -webkit-animation-delay: -11.4s; animation-delay: -11.4s; } .anim-text-flow span:nth-of-type(44), .anim-text-flow-hover:hover span:nth-of-type(44) { -webkit-animation-delay: -11.2s; animation-delay: -11.2s; } .anim-text-flow span:nth-of-type(45), .anim-text-flow-hover:hover span:nth-of-type(45) { -webkit-animation-delay: -11s; animation-delay: -11s; } .anim-text-flow span:nth-of-type(46), .anim-text-flow-hover:hover span:nth-of-type(46) { -webkit-animation-delay: -10.8s; animation-delay: -10.8s; } .anim-text-flow span:nth-of-type(47), .anim-text-flow-hover:hover span:nth-of-type(47) { -webkit-animation-delay: -10.6s; animation-delay: -10.6s; } .anim-text-flow span:nth-of-type(48), .anim-text-flow-hover:hover span:nth-of-type(48) { -webkit-animation-delay: -10.4s; animation-delay: -10.4s; } .anim-text-flow span:nth-of-type(49), .anim-text-flow-hover:hover span:nth-of-type(49) { -webkit-animation-delay: -10.2s; animation-delay: -10.2s; } .anim-text-flow span:nth-of-type(50), .anim-text-flow-hover:hover span:nth-of-type(50) { -webkit-animation-delay: -10s; animation-delay: -10s; } .anim-text-flow span:nth-of-type(51), .anim-text-flow-hover:hover span:nth-of-type(51) { -webkit-animation-delay: -9.8s; animation-delay: -9.8s; } .anim-text-flow span:nth-of-type(52), .anim-text-flow-hover:hover span:nth-of-type(52) { -webkit-animation-delay: -9.6s; animation-delay: -9.6s; } .anim-text-flow span:nth-of-type(53), .anim-text-flow-hover:hover span:nth-of-type(53) { -webkit-animation-delay: -9.4s; animation-delay: -9.4s; } .anim-text-flow span:nth-of-type(54), .anim-text-flow-hover:hover span:nth-of-type(54) { -webkit-animation-delay: -9.2s; animation-delay: -9.2s; } .anim-text-flow span:nth-of-type(55), .anim-text-flow-hover:hover span:nth-of-type(55) { -webkit-animation-delay: -9s; animation-delay: -9s; } .anim-text-flow span:nth-of-type(56), .anim-text-flow-hover:hover span:nth-of-type(56) { -webkit-animation-delay: -8.8s; animation-delay: -8.8s; } .anim-text-flow span:nth-of-type(57), .anim-text-flow-hover:hover span:nth-of-type(57) { -webkit-animation-delay: -8.6s; animation-delay: -8.6s; } .anim-text-flow span:nth-of-type(58), .anim-text-flow-hover:hover span:nth-of-type(58) { -webkit-animation-delay: -8.4s; animation-delay: -8.4s; } .anim-text-flow span:nth-of-type(59), .anim-text-flow-hover:hover span:nth-of-type(59) { -webkit-animation-delay: -8.2s; animation-delay: -8.2s; } .anim-text-flow span:nth-of-type(60), .anim-text-flow-hover:hover span:nth-of-type(60) { -webkit-animation-delay: -8s; animation-delay: -8s; } .anim-text-flow span:nth-of-type(61), .anim-text-flow-hover:hover span:nth-of-type(61) { -webkit-animation-delay: -7.8s; animation-delay: -7.8s; } .anim-text-flow span:nth-of-type(62), .anim-text-flow-hover:hover span:nth-of-type(62) { -webkit-animation-delay: -7.6s; animation-delay: -7.6s; } .anim-text-flow span:nth-of-type(63), .anim-text-flow-hover:hover span:nth-of-type(63) { -webkit-animation-delay: -7.4s; animation-delay: -7.4s; } .anim-text-flow span:nth-of-type(64), .anim-text-flow-hover:hover span:nth-of-type(64) { -webkit-animation-delay: -7.2s; animation-delay: -7.2s; } .anim-text-flow span:nth-of-type(65), .anim-text-flow-hover:hover span:nth-of-type(65) { -webkit-animation-delay: -7s; animation-delay: -7s; } .anim-text-flow span:nth-of-type(66), .anim-text-flow-hover:hover span:nth-of-type(66) { -webkit-animation-delay: -6.8s; animation-delay: -6.8s; } .anim-text-flow span:nth-of-type(67), .anim-text-flow-hover:hover span:nth-of-type(67) { -webkit-animation-delay: -6.6s; animation-delay: -6.6s; } .anim-text-flow span:nth-of-type(68), .anim-text-flow-hover:hover span:nth-of-type(68) { -webkit-animation-delay: -6.4s; animation-delay: -6.4s; } .anim-text-flow span:nth-of-type(69), .anim-text-flow-hover:hover span:nth-of-type(69) { -webkit-animation-delay: -6.2s; animation-delay: -6.2s; } .anim-text-flow span:nth-of-type(70), .anim-text-flow-hover:hover span:nth-of-type(70) { -webkit-animation-delay: -6s; animation-delay: -6s; } .anim-text-flow span:nth-of-type(71), .anim-text-flow-hover:hover span:nth-of-type(71) { -webkit-animation-delay: -5.8s; animation-delay: -5.8s; } .anim-text-flow span:nth-of-type(72), .anim-text-flow-hover:hover span:nth-of-type(72) { -webkit-animation-delay: -5.6s; animation-delay: -5.6s; } .anim-text-flow span:nth-of-type(73), .anim-text-flow-hover:hover span:nth-of-type(73) { -webkit-animation-delay: -5.4s; animation-delay: -5.4s; } .anim-text-flow span:nth-of-type(74), .anim-text-flow-hover:hover span:nth-of-type(74) { -webkit-animation-delay: -5.2s; animation-delay: -5.2s; } .anim-text-flow span:nth-of-type(75), .anim-text-flow-hover:hover span:nth-of-type(75) { -webkit-animation-delay: -5s; animation-delay: -5s; } .anim-text-flow span:nth-of-type(76), .anim-text-flow-hover:hover span:nth-of-type(76) { -webkit-animation-delay: -4.8s; animation-delay: -4.8s; } .anim-text-flow span:nth-of-type(77), .anim-text-flow-hover:hover span:nth-of-type(77) { -webkit-animation-delay: -4.6s; animation-delay: -4.6s; } .anim-text-flow span:nth-of-type(78), .anim-text-flow-hover:hover span:nth-of-type(78) { -webkit-animation-delay: -4.4s; animation-delay: -4.4s; } .anim-text-flow span:nth-of-type(79), .anim-text-flow-hover:hover span:nth-of-type(79) { -webkit-animation-delay: -4.2s; animation-delay: -4.2s; } .anim-text-flow span:nth-of-type(80), .anim-text-flow-hover:hover span:nth-of-type(80) { -webkit-animation-delay: -4s; animation-delay: -4s; } .anim-text-flow span:nth-of-type(81), .anim-text-flow-hover:hover span:nth-of-type(81) { -webkit-animation-delay: -3.8s; animation-delay: -3.8s; } .anim-text-flow span:nth-of-type(82), .anim-text-flow-hover:hover span:nth-of-type(82) { -webkit-animation-delay: -3.6s; animation-delay: -3.6s; } .anim-text-flow span:nth-of-type(83), .anim-text-flow-hover:hover span:nth-of-type(83) { -webkit-animation-delay: -3.4s; animation-delay: -3.4s; } .anim-text-flow span:nth-of-type(84), .anim-text-flow-hover:hover span:nth-of-type(84) { -webkit-animation-delay: -3.2s; animation-delay: -3.2s; } .anim-text-flow span:nth-of-type(85), .anim-text-flow-hover:hover span:nth-of-type(85) { -webkit-animation-delay: -3s; animation-delay: -3s; } .anim-text-flow span:nth-of-type(86), .anim-text-flow-hover:hover span:nth-of-type(86) { -webkit-animation-delay: -2.8s; animation-delay: -2.8s; } .anim-text-flow span:nth-of-type(87), .anim-text-flow-hover:hover span:nth-of-type(87) { -webkit-animation-delay: -2.6s; animation-delay: -2.6s; } .anim-text-flow span:nth-of-type(88), .anim-text-flow-hover:hover span:nth-of-type(88) { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; } .anim-text-flow span:nth-of-type(89), .anim-text-flow-hover:hover span:nth-of-type(89) { -webkit-animation-delay: -2.2s; animation-delay: -2.2s; } .anim-text-flow span:nth-of-type(90), .anim-text-flow-hover:hover span:nth-of-type(90) { -webkit-animation-delay: -2s; animation-delay: -2s; } .anim-text-flow span:nth-of-type(91), .anim-text-flow-hover:hover span:nth-of-type(91) { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; } .anim-text-flow span:nth-of-type(92), .anim-text-flow-hover:hover span:nth-of-type(92) { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; } .anim-text-flow span:nth-of-type(93), .anim-text-flow-hover:hover span:nth-of-type(93) { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; } .anim-text-flow span:nth-of-type(94), .anim-text-flow-hover:hover span:nth-of-type(94) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; } .anim-text-flow span:nth-of-type(95), .anim-text-flow-hover:hover span:nth-of-type(95) { -webkit-animation-delay: -1s; animation-delay: -1s; } .anim-text-flow span:nth-of-type(96), .anim-text-flow-hover:hover span:nth-of-type(96) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .anim-text-flow span:nth-of-type(97), .anim-text-flow-hover:hover span:nth-of-type(97) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .anim-text-flow span:nth-of-type(98), .anim-text-flow-hover:hover span:nth-of-type(98) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .anim-text-flow span:nth-of-type(99), .anim-text-flow-hover:hover span:nth-of-type(99) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .anim-text-flow span:nth-of-type(100), .anim-text-flow-hover:hover span:nth-of-type(100) { -webkit-animation-delay: 0s; animation-delay: 0s; } body { background: transparent; color: #999999; font-family: 'Ubuntu'; text-transform: uppercase; letter-spacing: 0.0em; font-size: 5em; -webkit-text-stroke: 3px black; line-height: 2; font-weight: 300; text-rendering: optimizeLegibility; text-align: center; } .container { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .txt { display: block; } a { text-decoration: none; position: absolute; bottom: 10px; right: 10px; text-align: right; color: #eee; font-size: 15px; line-height: 15px; }

 <div class="container"> <span id="demo" class="anim-text-flow"><span>start</span></span> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>