在类之间切换时转换不起作用答案

【问题标题】：Transition doesn’t work when switching between classes在类之间切换时转换不起作用
【发布时间】：2020-05-15 05:36:14
【问题描述】：

当我第一次在类之间切换时，不透明度转换不起作用。当我切换回来时，它确实有效。我尝试删除visibility 属性并只留下opacity，但没有奏效。

const navList = document.querySelector('.nav-list')
if (navList.classList.contains('invisible')) {
  setTimeout(function() {
    navList.classList.add('visible'), navList.classList.remove('invisible');
  }, 1000);
} else {
  setTimeout(function() {
    navList.classList.add('invisible');
  });
  navList.classList.remove('visible');
}

.visibile {
  opacity: 1;
  visibility: visible;
  transition: all ease-in 1s;
}

.invisible {
  opacity: 0;
  visibility: hidden;
  transition: all ease-in 1s;
}

<ul class="nav-list invisible text-center mt-5">
  <div class="">
    <div class="">
      <div>
        <li class="p-3 underline">Home</li>
        <li class="p-3 underline">About</li>
        <li class="p-3 underline">Contact</li>
      </div>
    </div>
  </div>
</ul>

【问题讨论】：

把transition放在你的基类上，例如nav-list

标签： javascript css class

【解决方案1】：

如 cmets 中所述，将转换放在始终存在的类上，例如 nav-list。我还建议在该类上放置一些状态，这样您只需要切换一个其他类（而不是两个）。

const navList = document.querySelector('.nav-list')
setInterval(() => {
  navList.classList.toggle('invisible')
}, 2000)

.nav-list {
  transition: all ease-in 1s;
  opacity: 1;
  visibility: visible;
}

.nav-list.invisible {
  opacity: 0;
  visibility: hidden;
}

<ul class="nav-list invisible text-center mt-5">
  <div class="">
    <div class="">
      <div>
        <li class="p-3 underline">Home</li>
        <li class="p-3 underline">About</li>
        <li class="p-3 underline">Contact</li>
      </div>
    </div>
  </div>
</ul>

【讨论】：