javascript - CSS 转换不适用于类切换 JavaScript

Question

您好，这可能是一件简单而愚蠢的事情，但我不明白为什么我的 css 转换不适用于 JavaScript 的类切换/删除/添加功能。我想我对 css 转换和 vanilla JS 有一个根本的误解......我添加了一个 codepen。 https://codepen.io/skwisgaar/pen/Yzygvqz

根据需要添加和删除该类，但过渡很尖锐，我的 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;
    }
}

标签： javascriptcssecmascript-6sassfade

Answer 1

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

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