html - 关键帧动画的列表定位

Question

我正在尝试使用关键帧动画，并为 li 元素的漂亮动画编写了这篇文章:
https://codepen.io/anon/pen/rZGgLg
HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

CSS:

$total-items: 5;

body {
  background: #111;
  color: #fff;
}

ul {
  width: 300px;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -150px;
}

li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: lowercase;
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
}

// Set delay per list item
@for $i from 1 through $total-items {
  li:nth-child(#{$i}) {
    animation-delay: 1s * $i;
  }
}

// Keyframe animation
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

现在我正在努力将其整合到以下部分中:

.half-width>.half-width-content {
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

.half-width>.half-width-content>.list-div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="half-width">
  <div class="half-width-content">
    <div class="list-div">
      <ul class="items-list" id="list">
        <li>Entry A</li>
        <li>Entry B</li>
        <li>Entry C</li>
        <li>Entry D</li>
      </ul>
    </div>
  </div>
</div>

当我将 list-div 中的 ul 定位为绝对值时，它们几乎没有宽度。

有人可以在这里帮助我，让 li 元素的动画方式与上面的简单示例相同吗？

Answer 1

在“简单示例”中，您的 ul 元素的宽度为 300 像素。当您将相同的宽度应用于新代码时，它会按预期工作。

在我的代码中，我使用了一个 flexbox 来水平居中列表。有关 flexbox 的更多信息，请参见 here .

body {
  background-color: black;
  margin: 0;
}

.list-div {
  display: flex;
  justify-content: center;
}

ul {
  padding: 0;
  margin: 0;
  width: 300px;
}

li {
  position: relative;
  display: block;
  border: 1px solid red;
  color: white;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: lowercase;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

li:nth-child(1) {
  animation-delay: 1s;
}

li:nth-child(2) {
  animation-delay: 2s;
}

li:nth-child(3) {
  animation-delay: 3s;
}

li:nth-child(4) {
  animation-delay: 4s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<div class="half-width">
  <div class="half-width-content">
    <div class="list-div">
      <ul class="items-list" id="list">
        <li>Entry A</li>
        <li>Entry B</li>
        <li>Entry C</li>
        <li>Entry D</li>
      </ul>
    </div>
  </div>
</div>