Question

我有一个页脚，我希望对用户不可见，直到它们滚动到我的页面底部。我试图用CSS完成所有这些并且只使用JS来应用将执行CSS转换的类，但问题是页脚中有一些锚点<a></a>因此我只使用不透明度的原始方法允许用户仍然将鼠标悬停在链接上，然后在我想要它们之前单击。

这导致我添加了jQuery $('.footer').hide()和$('.footer').show()，以便DOM只在我想要它时出现。然而，这样做似乎打破了应该发生的CSS过渡（现在代替动画从0不透明度变为0.8，它立即进行）。

是否有任何人都知道的解决方案可以让我完全隐藏DOM，但是只要它通过$.show()可用就让我使用CSS转换？

看到

只需向下导航到“Why”部分，然后观察..第一个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;
}

Answer 2

jQuery提供fadeIn和fadeOut等方法。还有animate方法。