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 代码将菜单的 class 更改为 "menu act"）

问题来了，为什么只有黑色背景从左边滑进来，而HTML个元素里面的文字还在屏幕上？

Answer 1

你根本不是 moving/sliding 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>

或使用转换然后 "positioning" 将是自动的。

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>

CSS 文本和背景的过渡

CSS transtition on both text and background

javascript

css

transition

webkit

css-transitions