使用onclick addClass显示div

Question

我正在尝试添加show类的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-不再需要供应商前缀.

$("#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 Snippets目前似乎已被打破:

工作实例