关注按钮时出现问题，按钮具有"输入">类型。
我有一个<input type="submit">的按钮(css -input[type="submit"])。 此按钮具有主要样式和悬停样式。 我还希望通过某种加载动画在焦点(单击时)上添加样式。
问题是需要单击两次才能提交：第一个 - 打开按钮，第二个 - 打开样式，在第一次单击时显示。因此，动作不会开始，因此加载动画会无限显示。
我在CodePen上代表这个麻烦，所以你可以自己检查一下。https://codepen.io/Auditive/pen/OeVdYL。
在CodePen上，您需要单击"提交"按钮，然后加载动画，您需要再次单击以执行提交操作。 第二次尝试时，它不会重复，但如果重新加载代码片段或页面 - 它会再次发生。
我也在这里复制代码：
function ShowResult() {
setTimeout(function() {
var result = document.getElementById("result");
if (result.style.display === "none") {
result.style.display = "block";
} else {
result.style.display = "none";
}
}, 2000); //Delay for 2 seconds
}
function ShowMain() {
var result = document.getElementById("result");
if (result.style.display === "block") {
result.style.display = "none";
} else {
result.style.display = "block";
}
}@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
body {
background: #222;
}
.main {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s ease;
}
#result {
display: none;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, #333, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 50;
animation: fadein 0.25s linear;
animation-fill-mode: forward;
}
input[type="submit"] {
font-family: 'Titillium Web', sans-serif;
font-size: 32px;
background: #fff0;
color: #fff;
border: 1px solid #fff;
border-radius: 4px;
padding: 5px 10px 5px 10px;
margin-top: 5%;
box-shadow: 0px 0px 8px 0px #fff0;
transition: all 0.25s ease;
}
input[type="submit"]:hover {
font-family: 'Titillium Web', sans-serif;
font-size: 32px;
background: #fff0;
color: #56ef56;
border: 1px solid #56ef56;
border-radius: 4px;
padding: 5px 10px 5px 10px;
margin-top: 5%;
box-shadow: 0px 0px 8px 0px #56ef56;
cursor: pointer;
transition: all 0.25s ease;
animation: glow 1s linear infinite;
}
input[type="submit"]:focus {
background: #262626;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/gVX3yPJ.gif);
background-repeat: no-repeat;
background-size: 200px;
background-position: 50% 50%;
color: #fff0;
border: 0;
margin-top: 0;
box-shadow: 0px 0px 0px 0px #fff0;
transition: all 0.25s ease;
outline: 0;
}
p {
font-family: 'Titillium Web', sans-serif;
font-size: 50px;
font-weight: 600;
text-align: center;
color: #45cb45;
margin-top: 1%;
}
img {
width: 60px;
height: 60px;
animation: fading 2s linear infinite;
}
#btn-close {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 24px;
text-transform: uppercase;
background: #353535;
color: #fff;
border: 1px solid #ff444400;
border-radius: 4px;
padding: 5px 10px 5px 10px;
margin: 0 auto;
margin-top: 2.5%;
box-shadow: 0px 2px 4px 0px #0000;
transition: all 0.25s ease;
}
#btn-close:hover {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 24px;
text-transform: uppercase;
background: #353535;
color: #ff4444;
border: 1px solid #ff444400;
border-radius: 4px;
padding: 5px 10px 5px 10px;
margin: 0 auto;
margin-top: 2.5%;
box-shadow: 0px 2px 4px 0px #000;
cursor: pointer;
transition: all 0.25s ease;
}
@keyframes fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes glow {
0% {box-shadow: 0px 0px 8px 0px #56ef56;}
50% {box-shadow: 0px 0px 8px 0px #56ef5600;}
100% {box-shadow: 0px 0px 8px 0px #56ef56;}
}
@keyframes fading {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}<body>
<div class="main">
<input type="submit" onclick="ShowResult()" value="Submit Me">
<div id="result">
<p>
Submitted!
<img src="https://i.imgur.com/X3D85Ns.png">
</p>
<button id="btn-close" onclick="ShowMain()">Close</button>
</div>
</div>
</body>询问有关解决方案的任何想法。 带着希望。 请。
PS：图像和GIF仅用于测试，取自Google Pictures，我没有任何版权主张。
罪魁祸首是ShowResult()函数中的这个 if 条件
if (result.style.display === "none") {
第一次调用它时，显示属性并不像您期望的那样是none- 它只是一个空字符串。稍后，您将显式将其设置为无，这就是它之后工作的原因。
要解决此问题，请使 if 条件也查找空字符串
if (result.style.display == "none" || result.style.display == "") {