我正在设置项目内部的新脉冲动画
但这是不起作用的,我该如何解决这个问题,我的问题是什么?
当我单击时(只需单击一键即可单击长时间单击)时,我想要的圆圈会脉冲脉冲
后
var abox = document.getElementsByClassName("pulsediv")[0];
function pulsing(){
abox.classList.toggle("pulse");
}
@import "compass/css3";
body, html {
height: 100%;
background: #fff;
}
.pulsediv{
position: relative;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
width: 100px;
height: 100px;
font-size: 1.3em;
font-weight: light;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #5a99d4;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
}
.pulse {
animation: pulse 2s;
}
@-webkit-keyframes pulse {
0% {
@include transform(scale(.9));
}
70% {
@include transform(scale(1));
box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
}
100% {
@include transform(scale(.9));
box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
}
}
<span class="pulsediv" onclick="pulsing">Hot</span>
我修复了您的动画,并在JavaScript中调用OnClick函数,并且它有效。
var abox = document.getElementsByClassName("pulsediv")[0];
// reset the transition by...
abox.addEventListener("click", function(e){
e.preventDefault();
// -> removing the class
abox.classList.remove("pulse");
// -> and re-adding the class
setTimeout(() => abox.classList.add("pulse"), 0);
}, false);
body, html {
height: 100%;
background: #fff;
}
.pulsediv {
position: relative;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
width: 100px;
height: 100px;
font-size: 1.3em;
font-weight: light;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #5a99d4;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
}
.pulse {
animation: pulse 2s;
}
@-webkit-keyframes pulse {
0% {
transform: scale(0.9));
}
70% {
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
transform: scale(0.9));
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
<span class="pulsediv">Hot</span>