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>
,
一种技巧是读取当前角度的值,然后将其转换为延迟,以便元素从该角度开始。
这里是一个例子。当您单击按钮时,第二个元素将在第一个元素的相同位置开始旋转:
$('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>
,
我想通了->
您只需在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");
本文链接:https://www.f2er.com/3166149.html