Question

我在变换转换时遇到了一些麻烦。我正在像freecodecamp前端挑战一样制作一个井字游戏：https://codepen.io/freeCodeCamp/full/KzXQgy。

我已经能够创建大多数布局的东西没有问题，但我在div上的过渡问题，显示哪些玩家＆＃39;在点击重置按钮后转动它。现在我只是在两个玩家模式下工作，所以我点击两个玩家，然后是X或O，然后tic-tac-toe板出现并进行div变换：translateY（-50px）来表示它是否＆＃39;播放器1或播放器2的转向（基于我设置的随机数变量）。第一次通过div过渡完美。然后我点击重置全部div，它让我回到开头再次选择多少玩家。 div转换变换：translateY（0）完全回到它的起始位置。在我挣扎的地方，现在当我再次循环选项时，如果它的播放器1或播放器2再次转向，则转换永远不会发生，并且div只会将-50px转换为-50px平移Y。

我已经尝试了我能想到的一切，JS设置转换，重置转换，将转换移动到不同的类，添加和删除只有转换的类。无法弄明白，但奇怪的是，每当我点击＆＃34;全部重置＆＃34;时，变换就会正常转换回0px。这是我的代码：https://codepen.io/rorschach1234/pen/dZMaJg?editors=0111。我知道它仍然非常粗糙，但是无法弄清楚这个过渡问题。真的很感激任何帮助。谢谢大家！

我的相关Html：

<div class="container">
  <div class="turns">
    <div class="turns__left turns__box"></div>
    <div class="turns__right turns__box"></div>
  </div>
</div>

我的相关CSS：

.turns {
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: space-around;
  top: 0;
  left: 0;
  z-index: -1;

  &__box {
    width: 40%;
    height: 50px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.3em;
    font-family: sans-serif;
    transition: transform 1s .3s ease;
  }

  &__left {
    background-color: $color-turn-left;
    //transition: transform 1s .3s ease;
  }

  &__right {
    background-color: $color-turn-right;
    //transition: transform 1s .3s ease;
  }
}

我的Javascript：

let numOfPlayers = document.querySelectorAll(".player .choices h2");
let playerScreen = document.querySelector(".player");
let markerScreen = document.querySelector(".markers");
let singlePlayer = true;
let backBtn = document.querySelector(".markers__back");
let gameScreen = document.querySelector(".game");
let playerOne; let playerTwo; let activePlayer;
let turnBoxes = document.querySelectorAll(".turns__box");
let resetBtn = document.querySelector(".scoreboard__reset");

game();

function game() {
  playerModeSelection();
  markerSelection();
}

function boardChange(active, inactive) {
  inactive.style.opacity = "0";
  inactive.style.zIndex = "0";
  active.style.opacity = "1";
  active.style.zIndex = "1"; 
}


//One or Two player Selection & transition to Marker Selector
function playerModeSelection() {
  for (let i = 0; i < numOfPlayers.length; i++) {
    numOfPlayers[i].addEventListener("click", function() {
    if(i === 1) {
      singlePlayer = false;
    }
    boardChange(markerScreen, playerScreen);
    }) 
   }
}

function markerSelection() {

  //Back Button Functionality
    backBtn.addEventListener("click", function() {
    boardChange(playerScreen, markerScreen); 
  })

  //Listen for choice of X or O
  for (let i = 0; i < markers.length; i ++) {
    markers[i].addEventListener("click", function() {
    boardChange(gameScreen, markerScreen);
    if (i === 1) {
      playerArr = ["O", "X"];
    }
    //Starts Two Player Game; Here begin is the function that calls transition
    if(!singlePlayer) {
      twoPlayerMode();
    }
    })
  }
}


function twoPlayerMode() {
  activePlayer = Math.floor(Math.random() * 2);
  turnBoxes[activePlayer].textContent = "Go Player " + (activePlayer + 1) + "!";
  turnBoxes[activePlayer].style.transform = "translateY(-50px)";
  resetBtn.addEventListener("click", function() {
    boardChange(playerScreen, gameScreen);
    turnBoxes[activePlayer].style.transform = "translateY(0px)";
  })
}

translateY（0）工作转换，但不转换（-50px）

0 个答案: