我正在尝试获取开圈的值。
这意味着在第一次开始时,让我们假设开放空间指向底部,然后当搜索完成时。它应该隐藏并在下次有人要在同一开放位置上搜索某物时出现。 “在我们现在的例子中,指向底部而不是从初始值开始,指向顶部”
我知道 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);
}
}
最佳答案
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>
关于javascript - 如何设置和获取加载圆圈@keyframe 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58695092/