CSS 过渡不适用于 class 切换 JavaScript

Question

你好，这可能是一件简单而愚蠢的事情，但我不明白为什么我的 css 转换在 JavaScript 的 class toggle/remove/add 函数上不起作用。我认为我对 css 转换和 vanilla JS 有一个根本性的误解...我添加了一个代码笔。 https://codepen.io/skwisgaar/pen/Yzygvqz

class 是根据需要添加和删除的，但是过渡很明显，我的 css 中的过渡被忽略了。我不认为我的 css 有问题，我添加了一个悬停来测试 JS 中没有 add/remove 的过渡。这似乎是 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 "hidden".

风格有冲突

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

CSS 过渡不适用于 class 切换 JavaScript

CSS Transition not working on class toggle JavaScript

javascript

css

sass

fade

ecmascript-6