jquery - 处理我希望用户不可见的 DOM 元素

Question

我有一个页脚，我希望在用户滚动到我的页面底部之前对用户不可见。我正在尝试使用 CSS 来完成这一切，并且只是使用 JS 来应用将执行 CSS 转换的类，但问题是页脚有一些 anchor <a></a>在其中，所以我最初使用不透明度的方法允许用户仍然将鼠标悬停在链接上并在我希望他们点击之前点击。

这让我添加了 jQuery $('.footer').hide()和 $('.footer').show()到位，以便 DOM 仅在我需要时出现。然而，这样做似乎破坏了本应发生的 CSS 过渡(现在不是从 0 不透明度到 0.8 的动画，而是立即进行)。

有没有任何人知道的解决方案可以让我完全隐藏 DOM，但一旦通过 $.show() 可用，我就可以在其上使用 CSS 转换？

这可以在 DaemonDeveloper.com 看到

只需向下导航至“为什么”部分并观察。第一个 CSS 转换已损坏，但显示按钮的第二个转换正常。

Answer 1

不幸的是，您无法转换已使用 display: none 隐藏的元素(jQuery 的 hide() 正在做的事情。

解决此问题的最佳方法是使用 visibility: hidden 隐藏元素并声明 height 为零。通过这种方式，您仍然可以将过渡应用到 opacity 以仅通过操作类来获得您想要的效果。

CSS

.hide {
  visibility: hidden;
  height:0;
  opacity:0;
  transition: opacity .2s ease;
}

.show {
  visibility:visible;
  height:auto;
  opacity:1;
}