javascript - 如何设置和获取加载圆圈@keyframe 的值

Question

我正在尝试获取开圈的值。

这意味着在第一次开始时，让我们假设开放空间指向底部，然后当搜索完成时。它应该隐藏并在下次有人要在同一开放位置上搜索某物时出现。 “在我们现在的例子中，指向底部而不是从初始值开始，指向顶部”

我知道 CSS 不能记住东西，所以应该用 JavaScript 来完成。

它必须与 IE 10 兼容。

蓝圈开仓位置要保存起来，以备下次搜索

.i-map-loading {
    display: none;
    color: #0067b1;
    background-color: transparent;
    font-size: 2.5em;
    text-align: center;
    text-shadow: 0 0 5px white;
    animation-name: spin;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Answer 1

CSS 确实会记住东西，而且你有能力 pause your animation直接来自 CSS:

.i-map-loading {
  /* I borrow the stylings from Temani's answer */
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 5px solid;
  border-left-color: yellow;
  border-radius: 50%;
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* by default paused */
  animation-play-state: paused;
}
:checked ~ .i-map-loading {
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<input type="checkbox" id="check">
<label for="check">toggle animation</label><br>

<div class="i-map-loading"></div>

但是，只要您的元素在 CSSOM 中，它就会记住一些东西，并且设置 display: none; 会从中删除您的元素及其所有子元素那里。

所以你需要另一种方式来隐藏你的元素:

.i-map-loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 5px solid;
  border-left-color: yellow;
  border-radius: 50%;
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* by default hidden, but not with display:none */
  visibility: hidden;
  position: absolute; /* if you need it to be removed from the page flow */
  /* by default paused */
  animation-play-state: paused;
}
:checked ~ .i-map-loading {
  visibility: visible;
  position: static;
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<input type="checkbox" id="check">
<label for="check">toggle animation</label><br>

<div class="i-map-loading"></div>