Question

解决了一个问题，重点放在具有“ input” 类型的按钮上。

我有一个<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>

寻求有关解决方案的任何想法。充满希望。拜托。

Answer 1

罪魁祸首是 ShowResult（）函数中的这种if条件

if (result.style.display === "none") {

第一次调用此显示属性时，可能不会像您期望的那样无-它只是一个空字符串。稍后，您将其显式设置为none，这就是事后起作用的原因。

要解决此问题，请使if条件也查找一个空字符串

if (result.style.display == "none" || result.style.display == "") {

双击“ input []：focus”的必要性

1 个答案: