有什么方法可以恢复循环动画的动画？

Question

在下面的基本代码中，我将创建带有两个按钮的循环动画倒数计时器。一种是用于显示计时器，另一种是用于隐藏计时器。默认情况下，当调用函数时，循环计时器开始运行。当我单击“隐藏”按钮时，将隐藏循环时间动画。单击“显示”按钮时，可以看到动画的循环计时器，但动画从头开始再次运行。我想与Java脚本一起连续运行它。

该如何在后台运行动画？您给我的任何指导都可以实现这一目标。

先谢谢了。

countdown('clock', 3, 0, 'timing');
    function countdown(element, minutes, seconds, element1) {
      var time = minutes * 60 + seconds;

      interval = setInterval(function () {
        var el = document.getElementById(element);
        var e = document.getElementById(element1);

        if (time <= 0) {
          var text = "00:00";
          el.innerHTML = text;
          e.innerHTML = text

          clearInterval(interval);
          return;
        }

        var minutes = Math.floor(time / 60);
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds;
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        e.innerHTML = text;
        time--;
      }, 1000);
    }
    function startWorker() {
      document.getElementById('hiding').style.display = 'block';
    }

    function stopWorker() {
      document.getElementById('hiding').style.display = 'none';
    }

@keyframes circletimer {
            0% {
                stroke-dashoffset: 252;
                stroke-dasharray: 252;
            }

            100% {
                stroke-dashoffset: 0;
                stroke-dasharray: 252;
            }
        }

        svg {
            background-color: transparent;
            position: absolute;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-90deg);
        }

        .circle {
            border: 16px solid #c01818;
            stroke: rgba(14, 194, 32, 0.8);
            stroke-width: 6;
            fill: transparent;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;
            animation: 182s circletimer linear;
        }

        .topcircle {
            border: 16px solid red;
            stroke: rgba(234, 235, 234, 1);
            stroke-width: 6;
            fill: transparent;
            color: white;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;

        }

        #combine {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: black;
            font-size: 20px;
            font-weight: 700;
        }

<div><span id='timing' style='color:red;'></span></div>
  <div id="hiding"><svg width='100' height='100'>
      <circle id='firstcircle' class='topcircle' cx='50' cy='50' r='40' />
      <circle id='secondcircle' class='circle' cx='50' cy='50' r='40' /></svg>
    <div id='combine'><span id='clock'></span></div>
  </div>
  <p>Count numbers: <output id="result"></output></p>
  <button onclick="startWorker()">Show</button>
  <button onclick="stopWorker()">Hide</button>

Answer 1

使用visibility:hidden/visible代替display:none/block，它将起作用

只需修改如下的javascript函数

function startWorker() {
  document.getElementById('hiding').style.visibility = 'visible';
}

function stopWorker() {
  document.getElementById('hiding').style.visibility = 'hidden';
}

在此处检查您修改过的小提琴

countdown('clock', 3, 0, 'timing');
    function countdown(element, minutes, seconds, element1) {
      var time = minutes * 60 + seconds;

      interval = setInterval(function () {
        var el = document.getElementById(element);
        var e = document.getElementById(element1);

        if (time <= 0) {
          var text = "00:00";
          el.innerHTML = text;
          e.innerHTML = text

          clearInterval(interval);
          return;
        }

        var minutes = Math.floor(time / 60);
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds;
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        e.innerHTML = text;
        time--;
      }, 1000);
    }
    function startWorker() {
      document.getElementById('hiding').style.visibility = 'visible';
    }

    function stopWorker() {
      document.getElementById('hiding').style.visibility = 'hidden';
    }

@keyframes circletimer {
            0% {
                stroke-dashoffset: 252;
                stroke-dasharray: 252;
            }

            100% {
                stroke-dashoffset: 0;
                stroke-dasharray: 252;
            }
        }

        svg {
            background-color: transparent;
            position: absolute;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-90deg);
        }

        .circle {
            border: 16px solid #c01818;
            stroke: rgba(14, 194, 32, 0.8);
            stroke-width: 6;
            fill: transparent;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;
            animation: 182s circletimer linear;
        }

        .topcircle {
            border: 16px solid red;
            stroke: rgba(234, 235, 234, 1);
            stroke-width: 6;
            fill: transparent;
            color: white;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;

        }

        #combine {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: black;
            font-size: 20px;
            font-weight: 700;
        }

<div><span id='timing' style='color:red;'></span></div>
  <div id="hiding"><svg width='100' height='100'>
      <circle id='firstcircle' class='topcircle' cx='50' cy='50' r='40' />
      <circle id='secondcircle' class='circle' cx='50' cy='50' r='40' /></svg>
    <div id='combine'><span id='clock'></span></div>
  </div>
  <p>Count numbers: <output id="result"></output></p>
  <button onclick="startWorker()">Show</button>
  <button onclick="stopWorker()">Hide</button>