javascript - 为什么我不能用 JavaScript 函数覆盖这个 CSS？

Question

我想要这个代码:

$('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function(){ $('#form1').submit(); }, 200);
  document.getElementById( "textdisplay" ).style.color = "yellow";
});

覆盖“Joash”的这个 CSS 杰作 https://codepen.io/joashp/pen/dYXNwj ,这样当我单击按钮时，接收 Joash 动画的文本将变为黄色并保持这种状态直到函数超时结束。

它不工作，动画继续。

这是我的代码:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    jQuery('#form1').submit();
  }, 2000);
  document.getElementById("textdisplay").style.color = "yellow";
});

body {
  background: #161616;
  color: #bdbdbd;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#submitbutton {
  width: 35%;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 25px;
  background-color: #e4bb97;
  border: 2px solid #3D3B3C;
  cursor: pointer;
  font-weight: 900;
  font-size: 0.5em;
  color: #3D3B3C;
  transition: background-color 0.2s;
  border-radius: 17px;
}

#form1 {
  color: red;
  background-color: green;
  width: 150px;
  height: 150px;
}

@import url(https://fonts.googleapis.com/css?family=Oxygen);
#textdisplay,
#textdisplay-hover:hover {
  /*
   * Elements settings
   */
}

#textdisplay span,
#textdisplay-hover:hover span {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  5% {
    color: #5cd666;
  }
  10% {
    color: #a55cd6;
  }
  100% {
    color: #64d65c;
  }
}

@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

#color-text-flow span:nth-of-type(1),
#color-text-flow-hover:hover span:nth-of-type(1) {
  -webkit-animation-delay: -19.8s;
  animation-delay: -19.8s;
}

#color-text-flow span:nth-of-type(100),
#color-text-flow-hover:hover span:nth-of-type(100) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

body {
  background-color: #1a1a1a;
  color: #fefefe;
  font-family: 'Ubuntu';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.3em;
  line-height: 2;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  text-align: center;
}

.container {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 10%;
  height: 10%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.txt {
  display: block;
}

a {
  text-decoration: none;
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-align: right;
  color: #eee;
  font-size: 15px;
  line-height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton"></button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span>BlueBox</span>
  </div>
</div>

Answer 1

举一个更简单的例子，你可以删除除 #textdisplay span { 和 @keyframes color-text-flow-keys { 之外的所有 CSS:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    console.log('submitting');
  }, 2000);
  document.getElementById("textdisplay").style.color = "yellow";
});

#textdisplay span {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton">submit</button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span>BlueBox</span>
  </div>
</div>

它看起来像无限动画，其 color: 导致元素的 color 属性被忽略。解决它的一种方法是仅当元素具有特定类时才运行动画，并在单击按钮时删除该类:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    console.log('submitting');
  }, 2000);
  document.querySelector('#textdisplay > span').classList.remove('anim');
  document.getElementById("textdisplay").style.color = "yellow";
});

#textdisplay span.anim {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton">submit</button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span class="anim">BlueBox</span>
  </div>
</div>