如何暂停旋转套件动画
How to pause a Spinkit animation?
我正在使用 Spinkit 的加载指示器,特别是圆形指示器,但我不知道如何暂停动画,因此圆形可以在屏幕上不旋转。
CSS是这样的。在回答这个问题之后,我尝试使用 jQuery 在单击时切换这个类:
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
$(document).ready(() => {
$('.sk-circle').click(function() {
$(this).toggleClass('paused')
})
})
.sk-circle {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.paused {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
但动画没有暂停,圆圈继续旋转。你能帮我吗?
代码不起作用的原因是,当您单击暂停的类时,您将暂停的类添加到.sk-circle
,但动画实际上存在于.sk-child
元素的伪元素上。
因此,修改 jQuery 代码,以便将类添加到 .sk-child
元素上,然后在 CSS 中将animation-play-state: paused
设置为 .sk-circle .sk-child.paused:before
下。这会将暂停播放状态设置为动画。(选择器必须更具体,因为添加动画的选择器具有 021 的特殊性。
注意:我已经删除了以下代码片段中的浏览器前缀,并包含无前缀库以保持较小。
$(document).ready(function() {
$('.sk-circle').on('click', function() {
$('.sk-circle .sk-child').toggleClass('paused');
});
});
.sk-circle {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
animation-delay: -0.1s;
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.sk-circle .sk-child.paused:before {
animation-play-state: paused;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
相关文章:
- 将范围添加到角度种子默认视图控制器时,测试套件现在失败
- PhantomJS在运行测试套件时崩溃
- Mocha测试套件因未捕获的异常而暂停
- 创建一个假DOM以在JavaScript测试套件中进行测试
- Chromecast网络套件可视性更改事件在更改为不同来源时不会在电视上启动
- 在MochaJS测试套件中使用--globals变量
- 水豚网络套件中未定义的方法“invalid_element_errors”
- 在网络套件中添加新的交易状态
- 访问谷歌文档中的谷歌应用套件脚本
- 使用量角器/茉莉角 e2e,如何创建可重用的规范套件
- 节点网络套件引用错误
- Google 应用套件脚本:将内容投放到边栏
- 如何暂停旋转套件动画
- 当页面上启用 Dojo 套件时,Uzbl 浏览器卡在 10%
- 对于移动网络套件,当您触摸/拖动水平菜单栏时,如何使水平菜单栏可滚动
- 用于实现 Python 的测试套件
- 执行套件时脚本之间的超时 - 量角器非角度
- 控制器方法在 AngularJs 中使用 Karma 调用 Jasmine 单元测试套件
- Mocha测试套件在尝试连接到API时出错
- nodejs-mocha套件未定义错误