放大时如何删除div重新定位？ （缩小浏览器）

Question

我制作了一个简单的滑块来响应mouseenter事件。

该算法是当用户将其鼠标指针移动到Appear菜单内容之一时，名为.slate的div下降。

我的问题是在Chrome或Opera中，当用户使用CTRL + Mouse Wheel Up进行放大时，.slate会溢出一点，并且在Firefox无法恢复的情况下会平滑地返回：

我正在寻找一种解决方案，以删除不需要的重新定位 ，除非不使用 transition。

我尝试更动态地提供transition来解决问题。鼠标进入transition时添加Appear，鼠标进入Disappear时将其删除。

但是这个没有与另一个新问题一起工作。当我像这样摇动鼠标时，transition将被忽略：

有什么方法可以解决此问题？

CodePen：Original Code / Attempt 2

摘要（原始）：

'use strict';
class Slate {
  constructor(header) {
    this.header = document.querySelector(header);
    this.slate = document.querySelector('.slate');
    this.menu = this.header.querySelector('.menu');
    this.contents = this.menu.querySelectorAll('.contents');
    this.addEvent();
  }
  addEvent() {
    this.contents.forEach((cur, idx) => {
      cur.addEventListener('mouseenter', (e) => this.expand(e, idx));
    })
  }
  expand(e, index) {
    let lesser = (index < 2),
        ternary = {
          toggle: (lesser) ? this.slate.classList.add('toggle') : this.slate.classList.remove('toggle')
        };
  }
}
const proSlate = new Slate('header');

      * {
        margin: 0;
        padding: 0;
        font-family: Helvetica;
      }
      div, section, header {
        position: relative;
      }
      ul, li {
        list-style-type: none;
      }
      header, .slate {
        width: 800px;
      }
      header {
        height: 100px;
        line-height: 100px;
        background-color: rgba(69, 255, 0, .4);
      }
      .slate {
        height: 400px;
        line-height: 400px;
        text-align: center;
        color: white;
        background-color: steelblue;
        top: -25rem;
        transition: top 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: -1;
        font-size: 4rem;
      }
      .menu {
        width: 100%;
        display: flex;
      }
      .contents {
        margin: 0 20px;
      }
      .toggle {
        top: 0;
      }

    <header>
      <ul class="menu">
        <li class="contents">Appear</li>
        <li class="contents">Appear</li>
        <li class="contents">Disapper</li>
        <li class="contents">Disapper</li>
      </ul>
    </header>
    <div class="slate">
      CONTEXT OF SLATE
    </div>

Answer 1

代替top来使用transform

'use strict';
class Slate {
  constructor(header) {
    this.header = document.querySelector(header);
    this.slate = document.querySelector('.slate');
    this.menu = this.header.querySelector('.menu');
    this.contents = this.menu.querySelectorAll('.contents');
    this.addEvent();
  }
  addEvent() {
    this.contents.forEach((cur, idx) => {
      cur.addEventListener('mouseenter', (e) => this.expand(e, idx));
    })
  }
  expand(e, index) {
    let lesser = (index < 2),
      ternary = {
        toggle: (lesser) ? this.slate.classList.add('toggle') : this.slate.classList.remove('toggle')
      };
  }
}
const proSlate = new Slate('header');

* {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

div,
section,
header {
  position: relative;
}

ul,
li {
  list-style-type: none;
}

header,
.slate {
  width: 800px;
}

header {
  height: 100px;
  line-height: 100px;
  background-color: rgba(69, 255, 0, .4);
}

.slate {
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: white;
  background-color: steelblue;
  transform: translateY(-100%);
  transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  z-index: -1;
  font-size: 4rem;
}

.menu {
  width: 100%;
  display: flex;
}

.contents {
  margin: 0 20px;
}

.toggle {
  transform: translateY(0);
}

<header>
  <ul class="menu">
    <li class="contents">Appear</li>
    <li class="contents">Appear</li>
    <li class="contents">Disapper</li>
    <li class="contents">Disapper</li>
  </ul>
</header>
<div class="slate">
  CONTEXT OF SLATE
</div>