Css 转换不响应

Question

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

.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');
  });
});

link 到代码笔：

Direct link to code

Answer 1

问题是您正在使用 CSS class hide 并且 Bootstrap 被设置为将 display: none !important; 应用于：

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

在 CSS 和 JavaScript 中更改 class 名称，它将起作用。

Answer 2

我在您的示例中发现的唯一问题是 class 名称中的拼写错误。

在您的 JavaScript 中，您正在添加 .hiding class，但 class 被称为 .hidi 。改成.hiding后好像一切正常了

Css 转换不响应

Css Transition Does not respond

javascript

css

transition

response