时间戳

首页 > 解决方案 > 在其他元素出现和消失时平滑更改 HTML 元素位置的通用方法

javascript - 在其他元素出现和消失时平滑更改 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 解决方案很好，但我正在寻找足够通用的东西，它可以在页面上的任何地方应用，而无需预先计算任何值，如果这有意义的话。

标签： javascriptcss

解决方案

首先根据 W3C （阅读更多）display不是可动画的属性。因此，当您将displayfrom更改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>

希望这可以帮助 ：）

推荐阅读