删除课程后元素消失

Question

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

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

点击按钮后，元素应该恢复到完全不透明度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除为h1定义的overflow：hidden属性将解决您的问题。

＆＃13;

＆＃13;

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

＆＃13;

.center {
    overflow: hidden;
}

h1 {
    float: left;
}

.fade {
    opacity: .2;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;