Javascript 使用onclick addClass获取要显示的div

我试图在添加show类的地方执行onclick事件，但是，当单击“创建新目标”时，我无法使我的

新目标容器出现

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


$（“#新目标按钮”）。单击（函数（）{
$（“#新目标容器”）.addClass（“显示”）；
});
#新目标容器{
-webkit不透明度：0；
不透明度：0；
边缘顶部：30px；
边框：1px纯黑；
高度：500px；
宽度：400px；
填充：10px；
}
.表演{
-webkit不透明度：1；
不透明度：1；
-webkit转换：所有1都易于输入输出；
过渡：所有1都易于输入输出；
}

创造新的目标
问题是由于
id
选择器比
类
选择器更具体。因此，
opacity:0
覆盖
opacity:1
。将
id
和
class
选择器添加在一起，使它们比原来的
id
选择器具有更高的特异性

还要注意的是，您的
textarea
元素需要一个结束标记，
transition
规则最好基于元素的基本规则，并且只适用于
opacity
规则，最后不再需要
-webkit-
供应商前缀


$（“#新目标按钮”）。单击（函数（）{
$（“#新目标容器”）.addClass（“显示”）；
});
#新目标容器{
不透明度：0；
边缘顶部：30px；
边框：1px纯黑；
高度：500px；
宽度：400px；
填充：10px；
过渡：不透明度1s缓进缓出；
}
#new-goal-container.show{
不透明度：1；
}

创造新的目标
问题是由于
id
选择器比
类
选择器更具体。因此，
opacity:0
覆盖
opacity:1
。将
id
和
class
选择器添加在一起，使它们比原来的
id
选择器具有更高的特异性

还要注意的是，您的
textarea
元素需要一个结束标记，
transition
规则最好基于元素的基本规则，并且只适用于
opacity
规则，最后不再需要
-webkit-
供应商前缀


$（“#新目标按钮”）。单击（函数（）{
$（“#新目标容器”）.addClass（“显示”）；
});
#新目标容器{
不透明度：0；
边缘顶部：30px；
边框：1px纯黑；
高度：500px；
宽度：400px；
填充：10px；
过渡：不透明度1s缓进缓出；
}
#new-goal-container.show{
不透明度：1；
}

创造新的目标
textarea
未关闭。
textarea
未关闭。。谢谢！你知道如何让
新目标容器
元素在不显示时不占用空间吗？使用
显示：无
而不是
不透明度：0
。这难道不可能实现淡入效果吗？我只是将容器的高度更改为0，然后添加了我想要的高度表演课。谢谢你的帮助！谢谢你知道如何让
新目标容器
元素在不显示时不占用空间吗？使用
显示：无
而不是
不透明度：0
。这难道不可能实现淡入效果吗？我只是将容器的高度更改为0，然后添加了我想要的高度表演课。谢谢你的帮助！