javascript - 我的边界切换颜色之间存在延迟。想知道我如何解决它看起来很奇怪

完整代码：
https://github.com/XxTyaftioNxX/RockPaperScissors
jsfiddle：
https://jsfiddle.net/45y3sdth/

在这里，记分板的边界比选项按钮的边界要早一秒
userChoice_div = document.getElementById（userChoice）;
scoreBoard_Id = document.getElementById（'score'）;

js

if(resultType === "tie"){
        //changing the color of the option border
        userChoice_div.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
        //chnaging the color of the scoreboard border
        scoreBoard_Id.classList.add('gray-glow');
        setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300);
        //increasing the score
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;

的CSS

.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

.gray-glow{
    border: 4px solid gray;
    box-shadow: 0 0 10px rgb(61, 68, 70);
}

html

<div class="score-board" id="score">
        <div id="user-label" class="badge">user</div>
        <div id ="comp-label"class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>LETS GET THAT BREAD</p>
    </div>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="assets/rock.png" alt="">
        </div>
        <div class="choice" id="paper">
            <img src="assets/paper.png" alt="">
        </div>
        <div class="choice" id="scissors">
            <img src="assets/scissors.png" alt="">
        </div>
    </div>
    </div> ```

最佳答案

.choice上有一个过渡，它解释了延迟。

transition:  0.5s ease;

var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("rock");
const paper_div = document.getElementById("paper");
const scissors_div = document.getElementById("scissors");
const scoreBoard_Id = document.getElementById('score');

function getComputerChoice() {
  const choices = ["rock", "paper", "scissors"];
  return choices[Math.floor(Math.random() * 3)];
}

function updateScore(resultType) {
  if (resultType === "tie") {
    userScore = userScore + 1;
    userScore_span.innerHTML = userScore;
    computerScore = computerScore + 1;
    computerScore_span.innerHTML = computerScore;

  } else if (resultType === "userWin") {
    userScore = userScore + 1;
    userScore_span.innerHTML = userScore;

  } else {
    computerScore = computerScore + 1;
    computerScore_span.innerHTML = computerScore;
  }
}

function addGlow(resultType, userChoice_div) {
  if (resultType === 'tie') {
    userChoice_div.classList.add('gray-glow');
    scoreBoard_Id.classList.add('gray-glow');
    setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
    setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300);

  } else if (resultType === 'userWin') {
    userChoice_div.classList.add('green-glow');
    scoreBoard_Id.classList.add('green-glow');
    setTimeout(() => scoreBoard_Id.classList.remove('green-glow'), 300);
    setTimeout(() => userChoice_div.classList.remove('green-glow'), 300);


  } else {
    userChoice_div.classList.add('red-glow');
    scoreBoard_Id.classList.add('red-glow');
    setTimeout(() => scoreBoard_Id.classList.remove('red-glow'), 300);
    setTimeout(() => userChoice_div.classList.remove('red-glow'), 300);
  }
}

function game(userChoice) {
  const userChoice_div = document.getElementById(userChoice);
  const computerChoice = getComputerChoice();
  const calculateOutput = userChoice.concat(computerChoice);

  switch (calculateOutput) {
    case "rockrock":
    case "paperpaper":
    case "scissorsscissors":
      result_p.innerHTML = "You Both Chose " + userChoice.toUpperCase() + ". Its a TIE!!!"
      updateScore("tie");
      addGlow("tie", userChoice_div);
      break;

    case "rockscissors":
      result_p.innerHTML = "ROCK smashes SCISSORS. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;
    case "scissorspaper":
      result_p.innerHTML = "SCISSORS cuts PAPER. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;
    case "paperrock":
      result_p.innerHTML = "PAPER covers ROCK. The USER wins!!!!"
      updateScore("userWin");
      addGlow("userWin", userChoice_div);
      break;

    case "paperscissors":
      result_p.innerHTML = "PAPER is cut by SCISSORS. The COMPUTER wins!!!!"
      updateScore("computerWin");
      addGlow("computerWin", userChoice_div);
      break;
    case "scissorsrock":
      result_p.innerHTML = "SCISSORS is smashed by ROCKS. The COMPUTER wins!!!!"
      updateScore("computerWin");
      addGlow("computerWin", userChoice_div);
    case "rockpaper":
      result_p.innerHTML = "ROCK is covered by PAPER. The COMPUTER wins!!!!"
      addGlow("computerWin", userChoice_div);
      break;
  }
}

function main() {
  rock_div.addEventListener('click', function() {

    game("rock");
  });

  paper_div.addEventListener('click', function() {
    game("paper");
  });

  scissors_div.addEventListener('click', function() {
    game("scissors");
  });
}

main();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0e183a;
}

header {
  background: rgb(172, 177, 204);
  padding: 20px;
}

header>h1 {
  color: #25272e;
  text-align: center;
  font-family: sans-serif;
}

.badge {
  background: red;
  font-size: 15px;
  padding: 2px 10px;
  font-family: sans-serif;
  font-weight: bold;
  color: aliceblue;
}

#user-label {
  position: absolute;
  top: 22px;
  left: -27px;
}

#comp-label {
  position: absolute;
  top: 22px;
  right: -30px;
}

.result {
  font-size: 30px;
  color: antiquewhite;
  margin: 45px;
}

.result>p {
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
}

.choices {
  margin: 25px 0x;
  text-align: center;
}

.choice {
  border: 4px solid linen;
  display: inline-flex;
  width: 240px;
  height: 240px;
  padding: 10px;
  border-radius: 50%;
  margin: 0px 15px;
  /* removed */
  /* transition:  0.5s ease; */
}

.score-board {
  margin: 20px auto;
  border: 4px solid white;
  border-radius: 5px;
  text-align: center;
  font-family: Times New Roman;
  width: 200px;
  color: white;
  font-size: 30px;
  padding: 15px 20px;
  position: relative;
}

#action-message {
  text-align: center;
  color: antiquewhite;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 22px;
  margin-top: 38px;
}

.choice:hover {
  cursor: pointer;
  background: #1c3ca3;
}

.score-board {
  margin: 20px auto;
  border: 4px solid white;
  border-radius: 5px;
  text-align: center;
  font-family: Times New Roman;
  width: 200px;
  color: white;
  font-size: 30px;
  padding: 15px 20px;
  position: relative;
}

.gray-glow {
  border: 4px solid gray;
  box-shadow: 0 0 10px rgb(61, 68, 70);
}

.green-glow {
  border: 4px solid green;
  box-shadow: 0 0 10px #7bff00
}

.red-glow {
  border: 4px solid red;
  box-shadow: 0 0 10px #cf0101;
}

<div class="score-board" id="score">
  <div id="user-label" class="badge">user</div>
  <div id="comp-label" class="badge">comp</div>
  <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
  <p>LETS GET THAT BREAD</p>
</div>
<div class="choices">
  <div class="choice" id="rock">
    <img src="assets/rock.png" alt="">
  </div>
  <div class="choice" id="paper">
    <img src="assets/paper.png" alt="">
  </div>
  <div class="choice" id="scissors">
    <img src="assets/scissors.png" alt="">
  </div>
</div>

旁注：您在switch语句中有错别字，第5种情况下，剪刀拼写错误应为scissorspaper而不是scissosrpaper

关于javascript - 我的边界切换颜色之间存在延迟。想知道我如何解决它看起来很奇怪，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58241711/