如何设置和获取加载圆@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

一种技巧是读取当前角度的值，然后将其转换为延迟，以便元素从该角度开始。

这里是一个例子。当您单击按钮时，第二个元素将在第一个元素的相同位置开始旋转：

$('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>

Answer 2

CSS确实记住了事情，并且您可以直接从CSS进行pause your animation：

.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 3

我想通了->

您只需在CSS中切换类。

1）首先在您的css文件中创建2个类：

.map-loading {

    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;
}

.map-loading-continue {
    animation-play-state: running;
    visibility: visible;
}

.map-loading-paused {
    animation-play-state: paused;
    visibility: hidden;
}

然后，您可以在js文件中切换动画，并在需要时切换类。这样可以暂停关键帧并使它“消失”并再次出现在同一帧。

在应设置动画的函数中：只需添加此内容

that.element.find('.map-loading').removeClass("map-loading-paused").addClass("map-loading-continue");

在应该暂停并消失的功能中：

that.element.find('.map-loading').removeClass("map-loading-continue").addClass("map-loading-paused");