CSS / webkit / animation不会重新调整整个div的大小

Question

我以JSFiddle为例。我正在使用this代码进行动画制作。

目前，动画正在使内容低于其动画时的反弹。我怎么能阻止这个？我在html / css边距和定位方面一直非常糟糕，而这一点让我感到困惑。

.loader,

.loader:before,

.loader:after {

  background: #0dc5c1;

  -webkit-animation: load1 1s infinite ease-in-out;

  animation: load1 1s infinite ease-in-out;

  width: 1em;

  height: 4em;

}

.loader:before,

.loader:after {

  position: absolute;

  top: 0;

  content: '';

}

.loader:before {

  left: -1.5em;

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.loader {

  text-indent: -9999em;

  margin: 15px;

  position: relative;

  font-size: 6px;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

.loader:after {

  left: 1.5em;

}

@-webkit-keyframes load1 {

  0%, 80%, 100% {

    box-shadow: 0 0 #0dc5c1;

    height: 4em;

  }

  40% {

    box-shadow: 0 -2em #0dc5c1;

    height: 5em;

  }

}

@keyframes load1 {

  0%, 80%, 100% {

    box-shadow: 0 0 #0dc5c1;

    height: 4em;

  }

  40% {

    box-shadow: 0 -2em #0dc5c1;

    height: 5em;

  }

}

<ul class='my_list'>
  <li>Item 1</li>

  <div class='loader'></div>

  <li>Item 2</li>
</ul>

编辑：为了清晰起见，添加更多信息。 我试图在嵌套的UL上添加一个加载占位符，如果它是空的。我的HTML最终会看起来更像这样：

.loader,

.loader:before,

.loader:after {

  background: #0dc5c1;

  -webkit-animation: load1 1s infinite ease-in-out;

  animation: load1 1s infinite ease-in-out;

  width: 1em;

  height: 4em;

}

.loader:before,

.loader:after {

  position: absolute;

  top: 0;

  content: '';

}

.loader:before {

  left: -1.5em;

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.loader {

  text-indent: -9999em;

  margin: 15px;

  position: relative;

  font-size: 6px;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

.loader:after {

  left: 1.5em;

}

@-webkit-keyframes load1 {

  0%, 80%, 100% {

    box-shadow: 0 0 #0dc5c1;

    height: 4em;

  }

  40% {

    box-shadow: 0 -2em #0dc5c1;

    height: 5em;

  }

}

@keyframes load1 {

  0%, 80%, 100% {

    box-shadow: 0 0 #0dc5c1;

    height: 4em;

  }

  40% {

    box-shadow: 0 -2em #0dc5c1;

    height: 5em;

  }

}

<ul class='items'>
  <li>Item 1
    <ul class='results'>
      <li>Result 1</li>
      <li>Result 2</li>
      <li>Result 3</li>
      </ul>
  </li>
  <li>Item 2
    <ul>
      <li class='loader'></li>
    </ul>
    <!-- Still waiting for results -->
    <!-- Spinner here -->
  </li>
  <li>Item 3
    <ul class='results'>
      <li>Result 1</li>
    </ul>
  </li>
  </ul>

Answer 1

您可以使用变换div上的绝对位置调整布局，并在列表中相对位置。转换div可以从列表中删除，然后使用top / right / left / bottom定位。 Link to an updated jsFiddle

更改了HTML：

<ul class='my_list'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<div class='loader'></div>

添加了CSS：

.loader {
  top: 35px;
  left: 40px;
}
.my_list li {
  padding-bottom:50px;
}

.my_list {
  position:relative;
}