我对CSS有点陌生，我知道周围还有更多这样的主题。但似乎没有一个能解决我的问题。因此，在尝试了两个小时的各种隐藏、转换、显示等之后，我的问题是冒着发布重复内容的风险。
如何使用CSS和Javascript使此模态显示平滑？
CSS
/* The Modal (background) */
.modalestate {
visibility: hidden; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 25;
top: 15;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
transition: all ease 1s;
}
/* Modal Content/Box */
.modalestate-content {
background-color: rgba(0,0,0,0.0);
margin: 12% auto; /* 15% from the top and centered */
padding: 22px;
float:left;
width: 550px; /* Could be more or less, depending on screen size */
transition: all ease 1s;
}
/* The Close Button */
.closeestate {
color: #aaa;
float: right;
font-size: 20px;
font-weight: bold;
}
.closeestate:hover,
.closeestate:focus {
color: whitesmoke;
text-decoration: none;
cursor: pointer;
}
显示模态及其内容的div：
<div id="mymodelestate" class="modalestate">
<div class="modalestate-content">
<span class="closeestate">×</span>
<div id="responsecontainer" align="center"></div>
</div></div>
Javascript：
<script>
// Get the modal
var modal = document.getElementById("mymodelestate");
// Get the button that opens the modal
var btn = document.getElementById("btnestate");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeestate")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.visibility = "visible";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.visibility = "hidden";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.visibility = "hidden";
}
});</script>
提前感谢各位！
什么样的"过渡"；你想做什么？你想对你的模态应用什么效果？这还不太清楚，但我猜你正在尝试让模式淡入淡出，当用户点击按钮时慢慢淡出。这个假设来自于您使用visiblity的事实：隐藏/可见。
如果你试图具有淡入/淡出效果，你需要将不透明度设置为0：
opacity: 0;
当您想要显示它时，您可以将不透明度设置为1。
然而，您将遇到许多其他问题。不过，我要说的是，这将是一个很好的学习练习，可以让您熟悉HTML中的元素是如何工作的，以及它们与CSS的交互。
编辑：正如我在评论中承诺的那样，我将在这里提供一个例子和一些建议。
首先，你有身体。这个身体，实际上就像一个人的身体。将元素附着到它(或人体部位)。你把这个写得很好，你甚至使用了z索引，所以我不会过多讨论这个。我知道更多"；高级"；开发人员会说一些关于DOM的东西，等等，它没有附加yada yada，但我们会在这里保持简单。
接下来，所有元素都有一个与它们相关联的初始属性。例如，DIV元素具有内联块作为初始属性。P元素标记具有一定的边距，并且是块元素。等等。你显然可以用CSS覆盖这些，或者像你一直在做的那样添加额外的属性。通过给一个元素一个CLASS，您就可以创建自己的自定义元素(尽管它仍然是基本元素，DIV、P、a、SPAN等)
接下来是理解所有这些属性。你似乎知道很多属性，所以我不会过多讨论，但我会讨论这些：
- 可见性-元素仍然存在于BODY上。它就在那里，它仍然触摸着一切，影响着周围的一切。把它想象成人体上一只看不见的手臂。你仍然可以用那只手臂触摸东西，让东西移动，推开东西，等等……这简直是看不见的。GPU或任何驱动图形的东西都不会渲染这个元素
- 不透明度-类似于可见性，但您可以获得更多的控制。不透明度为1(或100%)表示元素完全可见。不透明度为.5或50%意味着元素只能看到一半。这意味着它背后的东西可以通过它看到。GPU仍在渲染这个元素，但你现在可以包括透明度。0表示它完全透明(基本上是不可见的)
- 显示-用于设置元素在身体中的行为方式以及它与其他元素的交互方式。你会经常看到甚至使用"；显示：无"；这使得元素看起来好像已经不存在了(不过它仍然存在于HTML中)。它将不再影响它周围的任何东西
现在，更重要的是了解这些属性的一些更复杂的部分。在您的情况下，您应该了解转换。使用转换属性可以修改浏览器对元素属性操作的处理方式。简单地说，正如你所知，它可以让你在元素上创建效果，比如淡入、淡出、移动等。它看起来很好，很平滑(如果做得正确的话)。
但是，这些被操纵的属性会立即发生。因此，如前所述，过渡会为您提供使其平滑的控制。但是，需要注意的是，这些转换只有在元素已经具有要操作的属性值时才会起作用。例如：
.MyDivClass{
height: 32px;
width: 32px;
transition: all .3s ease;
}
.MyDivClassExtra{
height: 64px;
width: 64px;
}
div似乎会在0.3秒内变大。那是因为我的身高和宽度是固定的。如果我做了"；NOT"；设置宽度/高度，甚至将其设置为atuo，都会立即发生。因为没有可操作的属性！即使将高度/宽度设置为0也可以，因为至少它有一个可以使用的属性。
当涉及到编程时，有时你不得不抛开常识。像"可见性"这样的东西，如果你在过渡时打开和关闭它，它会很好地消失。然而，没有。可见性只是简单的打开或关闭。没有什么可转换的。对于不透明度，它不仅仅是简单的开或关。有101个数字(实际上是无限的，我想…)可以从中转换。0%至100%。你也可以做小数。显示器也是如此。稍微复杂一点，但简单地说——显示器只有ON或OFF。
代码中的其他一些注意事项是，.modelstate元素位于一切之上。因此，您的用户将无法单击任何内容。隐藏的可见性不会使其不可点击。就像我提到的，它只是让它隐形——它仍然存在，影响着其他一切。