删除课程后元素消失

Question

当从具有非常特定配置的元素中删除类时,我在Chrome 60.0中遇到了一些奇怪的行为.

我fade从一个<h1>元素中删除了该类,它使它完全消失.通过删除dev-tools元素检查器中的类可以重现该问题.谁能告诉我这里发生了什么？

单击按钮后,该元素应该恢复到完全不透明度.

var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function(){
   h1.classList.remove('fade');
});

.center {
  overflow: hidden;
}
h1 {
  float: left;
  overflow: hidden;
}
.fade {
  opacity: .2;
}

<div class="center">
  <div>
    <h1 class="fade">Watch me disappear</h1>
  </div>
</div>
<button>Click</button>

Answer 1

删除为 h1 定义的溢出：隐藏属性将解决您的问题。

var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function() {
  h1.classList.remove('fade');
});

.center {
    overflow: hidden;
}

h1 {
    float: left;
}

.fade {
    opacity: .2;
}

<div class="center">
  <div>
    <h1 class="fade">Watch me disappear</h1>
  </div>
</div>
<button>Click</button>