我对 Web 开发的了解不够好，无法判断我的问题是否已经得到解答 here , 如果这是重复的，我们深表歉意。
我打算在我的网站上有很多不同的页面，所有页面的结构都不同，所有这些页面都需要在各种不同的屏幕尺寸上看起来合理。这些页面将包含和/或链接到代码，使各种内容出现和消失。然而，在其中一些页面上，我发现同时出现和消失的内容太多，读者对到底发生了什么变化感到困惑。为了解决这个问题，我很乐意编写一些 CSS 或一些 JS 来确保当元素的位置发生变化时，它会平滑地移动到新位置而不是仅仅跳到那里。希望这能帮助最终用户更好地了解内容的变化。
我目前正在尝试使用应用于“position”属性的“transition”来使用 CSS，但无济于事。这是代码:
function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
if (element.style.display === "none") {
element.style.display = null;
} else {
element.style.display = "none";
}
}#lol {
position: relative;
transition: position 2s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="foo"> foo </div>
<div id="bar"> bar </div>
<div id="lol"> lol </div>
<button onmouseup="toggleVisibility('bar')"> Click me</button>
</body>不幸的是，这没有任何帮助。没有平稳的过渡；说“lol”的文字瞬间跳来跳去。
想法，有人吗？ javascript 解决方案很好，但我正在寻找足够通用的东西，以便它可以应用于页面上的任何位置，而无需预先计算任何值，如果这有意义的话。
最佳答案
您需要定义元素的高度，auto 不会设置动画。此外，您不应该使用 id 来设置对象样式，最好使用一个类，这样您就不会遇到特异性问题。
这是一个工作示例，我还添加了 opacity 和 overflow: hidden 以使元素消失:
function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
element.classList.toggle("hidden");
}.item {
position: relative;
height: 20px;
overflow-y: hidden;
opacity: 1;
transition: height 0.5s, opacity 0.3s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
.hidden {
height: 0;
opacity: 0;
}<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="foo" class="item"> foo </div>
<div id="bar" class="item"> bar </div>
<div id="lol" class="item"> lol </div>
<button onmouseup="toggleVisibility('bar')"> Click me</button>
</body>关于javascript - 当其他元素出现和消失时平滑地改变 HTML 元素位置的通用方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58369866/