javascript - 使用 onclick addClass 让 div 出现

Question

我正在尝试执行添加了显示类的 onclick 事件，但是，当单击“创建新目标”时，我无法让我的 new-goal-container 出现。

我不希望这是一个切换，只是一个添加类。正如我的代码所示，我试图让它用 css 快速淡入外观。有没有更好的方法，因为现在即使没有显示 div 仍然占用空间，当容器不可见时，我希望它看起来好像不存在。

$("#new-goal-button").click(function() {
  $("#new-goal-container").addClass("show");
});

#new-goal-container {
  -webkit-opacity: 0;
  opacity: 0;
  margin-top: 30px;
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
}
.show {
  -webkit-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="new-goal-button">Create new goal</div>
<div id="new-goal-container">
  <input type="text" placeholder="Goal Title">
  <textarea placeholder="Goal Description">
</div>

Answer 1

问题是由于 id 选择器比 class 选择器更具体。因此，opacity: 0 覆盖 opacity: 1。将 id 和 class 选择器一起添加，使它们比单独的原始 id 选择器具有更高的特异性。

另请注意，您的 textarea 元素需要一个结束标记，transition 规则最好位于元素的基本规则上，并且仅适用于 opacity 规则，最后不再需要 -webkit- vendor 前缀。

$("#new-goal-button").click(function() {
  $("#new-goal-container").addClass("show");
});

#new-goal-container {
  opacity: 0;
  margin-top: 30px;
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
  transition: opacity 1s ease-in-out;
}
#new-goal-container.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="new-goal-button">Create new goal</div>
<div id="new-goal-container">
  <input type="text" placeholder="Goal Title">
  <textarea placeholder="Goal Description"></textarea>
</div>

这也是 jsFiddle 中的一个工作示例，因为 SO 片段目前似乎已损坏:

Working example