标签输出

Question

我有一个css动画，基本上只在10秒后启动。但是，有时候，如果我在动画开始之前我在另一个标签上并且我停留在该标签上，则只有当我返回到包含动画的标签/页面时，动画才会启动。

document.getElementById('CircleTimer').getElementsByTagName('circle')[0].style.animation = ' countdown 10s linear infinite';

#CircleTimer circle {
  stroke-dasharray: 200px;
  stroke-dashoffset: 0px;
  stroke-width: 2px;
  stroke: #04e004;
  fill: none;
}

@keyframes countdown {
  from {
    stroke: #04e004;
    stroke-dashoffset: 0px;
  }
  to {
    stroke: #dd0000;
    stroke-dashoffset: 200px;
  }
}

<svg id="CircleTimer">
  <circle r="31" cx="35" cy="35"></circle>
  <span id="CountDown">10</span>
</svg>

Answer 1

更新：我现在很确定问题出在：

document.getElementById('CircleTimer').getElementsByTagName('circle')[0].style.animation = ' countdown 10s linear infinite';

在我进入页面之前似乎没有提供这些属性。 我做了一个Jsfiddle给你一个例子。

https://jsfiddle.net/8L8vfjsg/