CSS过渡不适用于类切换JavaScript

Question

您好，这可能很简单而且很愚蠢，但是我不明白为什么我的CSS过渡无法在JavaScript的类切换/删除/添加功能上起作用。我认为我对CSS转换和原始JS有基本的误解...我添加了一个Codepen。 ASCII

该类可以根据需要添加和删除，但是过渡非常尖锐，而忽略了CSS中的过渡。我认为这不是CSS的问题，我添加了一个悬停功能来测试过渡，而无需在JS中添加/删除。看来这是JS的默认行为？在JS中更改类之前或之时，我需要添加一些东西来使过渡起作用吗？任何帮助表示赞赏。

  const btn = document.querySelector('#show-hide');
  const pagenav = document.querySelector('#page-nav');
  const showhide = () => {
    if(pagenav.classList.contains('hidden')){
      pagenav.classList.remove('hidden');
    } else {
      pagenav.classList.add('hidden');
    } 
  }
  btn.onclick = showhide;

这是我的CSS：

#page-nav {
    opacity:1;
    position:fixed;
    bottom:0;
    width:100%;
    z-index:2;
    @include transition(opacity 500ms);
    &.hidden {
        opacity:0;
    }
    &:hover {
      opacity:0;
    }
}

Answer 1

您对“隐藏”类的风格有矛盾。

应用隐藏类时，它设置为显示：无，因此它基本上不包含在页面布局中，因此无法转换其他属性。