html - 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 可以从列表中删除，然后使用顶部/右侧/左侧/底部定位。 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;
}