文本和背景上的 CSS 过渡

Question

我正在移动设备上使用 JavaScript、HTML 和 CSS 设计一个简单的滑入式菜单

<div class="menu">division
     <ul>unordered list
          <li>list item 1</li>
          <li>list item 2</li>
     </ul>
</div>

CSS：

.menu {
    position: absolute;
    width: 0px;
    background: #111;
    -webkit-transition: width 2s; 
    transition: width 0.5s;
}

.menu.act {
    position: absolute;
    background: #111;
    width: 67%;
}

（一段简单的 JavaScript 代码将菜单的类更改为“menu act”）

问题是，为什么只有黑色背景从左边滑入，而 HTML 元素中的文字却留在屏幕上？

Answer 1

您根本没有移动/滑动ul，只是改变了宽度。

ul 没有宽度，因此无法显示背景。文本溢出了零宽度元​​素，这就是它仍然可见的原因。

然后，当您扩大宽度时，背景变得可见。

我已将此切换为 :hover 以进行演示。

body {
  background: red;
}
.menu {
  position: absolute;
  width: 0px;
  background: #111;
  -webkit-transition: width 2s;
  transition: width 0.5s;
  color: white;
}
.menu:hover {
  position: absolute;
  background: #111;
  width: 67%;
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

相反，尝试将宽度保留为 67% 并调整位置..像这样。

body {
  background: red;
  height: 100vh;
}
.menu {
  position: absolute;
  top: 0;
  left: -67%;
  width: 67%;
  background: #111;
  transition: left 0.5s;
  color: white;
}
body:hover .menu {
  left: 0;
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

OR 与 transform 那么“定位”将是自动的。

body {
  background: red;
  height: 100vh;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 67%;
  transform: translateX(-100%);
  background: #111;
  transition: transform 0.5s;
  color: white;
}
body:hover .menu {
  transform: translateX(0%);
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>