在其他元素出现和消失时平滑更改 HTML 元素位置的通用方法

我对Web开发的理解不够好，无法判断我的问题是否已经在这里得到回答，所以如果这是一个重复的问题，请道歉。

我计划在我的网站上有很多不同的页面，所有页面的结构都不同，所有这些都需要在各种不同的屏幕尺寸上看起来合理。这些页面将包含和/或链接到使各种内容出现和消失的代码。然而，在其中一些页面上，我发现有太多的东西同时出现和消失，读者对到底发生了什么变化感到困惑。为了解决这个问题，我很想写一些CSS或一些JS，以确保当元素的位置发生变化时，它会平滑地移动到新位置，而不仅仅是跳到那里。希望这将有助于最终用户更好地了解内容的变化。

我目前正在尝试使用应用于"位置"属性的"过渡"使用 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>

不幸的是，这没有任何帮助。没有平稳的过渡;说"哈哈"的文字瞬间跳来跳去。

想法，有人吗？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>

首先根据W3C(阅读更多信息(，display不是一个可动画的属性。因此，当您将display从block更改为none反之亦然时，您无法对此更改进行动画处理。但是为了达到你想要的，你可以使用height属性。隐藏元素时，您需要做的是将高度设置为 0。并为此添加过渡，这将解决问题。

此外，为了让您在整个应用程序中使用它，请使用一个类，例如hidden，并且每当您希望使用动画隐藏任何元素时，请将此类添加到该类中。下面是相同的工作片段。此外，要使上述内容正常工作，您需要为元素提供一些初始高度，因为过渡不适用于height: auto

function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
if (element.style.height === "0") {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}

div.hidden {
-moz-transition: height .8s;
-ms-transition: height .8s;
-o-transition: height .8s;
-webkit-transition: height .8s;
transition: height .8s;
height: 0;
overflow: hidden;
opacity: 0;
}
div {
height: 20px;
opacity: 1;
}

<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>

希望这对:)有所帮助

相关内容

最新更新

热门标签：