javascript - Css Transition 不响应

Question

我的 CSS 转换不起作用。我不知道是什么问题。我正在使用 JavaScript 添加类。该元素未更改显示。这是我的代码和我的代码笔的链接。我正在尝试为井字游戏制作一个简单的模式。感谢您的帮助!

.back {
  margin-top: 200px;
}

.box {
  display: inline-block;
  vertical-align:top;
  background: lightgray;
  width: 120px;
  height: 120px;
  margin: 2px 0 2px 0;
  border-radius: 20px;
}

h1 {
  margin-top: 30px;
  font-weight: bold;
  font-size: 4em;
}

.popup {
  font-family: 'Signika', 'sans-serif';
  margin: 200px auto 0 auto;
  width: 700px;
  height: 270px;
  background: skyblue;
  border: 6px solid #8dadc3;
  box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
  border-radius: 40px;
  position: relative;
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: all 5s;
}

.popup h4 {
  padding-top: 60px;
  font-weight: bold;
  font-size: 3em;
  left: 10%;
  position: absolute;
}

.x {
  margin-top: 130px;
  position: absolute;
  border: 4px solid #8dadc3;
  left: 40%;
}

.o {
  margin-top: 130px;
  position: absolute;
  border: 4px solid #8dadc3;
  left: 50%;
}

.popup.hide {
  opacity: 0;
  visibility: hidden;
}

这是我的 JavaScript:

$(document).ready(function(){
  var chosen;
  $('.player').on("click", function(e){
    if($(this).hasClass("x")){
      console.log("X");
      chosen = "X"
    } else {
      console.log("O");
      chosen = "O";
    }
    $('.popup').addClass('hide');
  });
});

代码笔链接:

Direct link to code

Answer 1

问题是您正在使用 CSS 类 hide 并且 Bootstrap 设置为应用 display: none !important; 到那个:

https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530

更改 CSS 和 JavaScript 中的类名，它将起作用。