javascript - 删除类后元素消失

Question

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

我删除了 fade来自 <h1> 的类(class)元素，它使它完全消失。也可以通过删除开发工具元素检查器中的类来重现该问题。谁能告诉我这是怎么回事？

元素应该在点击按钮后恢复到完全不透明状态。

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 定义的 overflow: hidden 属性将解决您的问题。

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>