CSS 转换在 class 切换不起作用 JavaScript

Question

Hello this is probably something easy and dumb, but I am not understanding why my css transition is not working on class toggle/remove/add function from JavaScript. 我想我对 css 转换和香草 JS 有一个根本的误解......我添加了一个 codepen。 https://codepen.io/skwisgaar/pen/Yzygvqz

class 会根据需要添加和删除，但是由于忽略了我的 css 中的过渡，因此过渡很尖锐。 我不认为我的 css 有问题，我添加了一个 hover 来测试没有在 JS 中添加/删除的转换。 这似乎是 JS 的默认行为？ 在 JS 中更改 class 之前或之后，我是否需要添加一些东西才能使转换工作？ 任何帮助表示赞赏。

  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

您对 class “隐藏”的风格有冲突。

当隐藏 class 被应用时，它被设置为 display: none 因此它基本上不包含在页面布局中，因此无法转换其他属性。