Как установить и получить значение загрузочного круга @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 действительно запоминает вещи, и у вас есть возможность приостановить анимацию непосредственно из 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>

Answer 2

Один трюк состоит в том, чтобы прочитать значение текущего угла, а затем преобразовать его в задержку, чтобы элемент начал с этого угла.

Вот пример. Когда вы нажимаете кнопку, второй элемент начинает вращаться с той же позиции, что и первый:

$('button').click(function() {
  var r = $('.current').css('transform');

  var a = r.split('(')[1].split(')')[0].split(',')[0];
  var b = r.split('(')[1].split(')')[0].split(',')[1];
  var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
  if (angle < 0)
    angle += 360;
  var delay = -5 * (angle / 360);

  $('.new').css('animation-delay', delay + 's');
  $('.new').css('animation-name', 'spin');

})

.i-map-loading {
  color: #0067b1;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: inline-block;
  border: 5px solid;
  border-left-color: yellow;
  border-radius: 50%;
  background: linear-gradient(red, red) center/20px 2px no-repeat;
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="i-map-loading current"></div>
<div class="i-map-loading new" style="animation-name:none;"></div>
<br>
<button>Start</button>