CSS - 动画列表顺序答案

【问题标题】：CSS - Animate list orderCSS - 动画列表顺序
【发布时间】：2017-02-13 19:55:18
【问题描述】：

给定以下列表（不同的高度）：

<ul>
    <li>11111111</li>
    <li>2222<br>2222</li>
    <li>33333333</li>
    <li>44444444</li>
    <li>55555555</li>
    <li>66666666</li>
</ul>

是否可以为列表的顺序设置动画（图 1），例如仅使用 CSS 将元素 <li>2222<br>2222</li> 移动到列表底部？

【问题讨论】：

也许this 会帮助你？
列表中是否有变量。 IE。文本的长度、列表项的宽度、列表中的项目数、打开和关闭触发位置变化的类？
为了交换元素，commen von @Huelfe 工作得很好，但如果你想要一个动画，你不能只做那个 css。因此，您将使用 Javscript 根据其高度计算 <li> 的放置位置，并相对于该元素移动所有其他元素。
如果仅用于 CSS，为什么还要包含 jQuery 标签？
感谢您的回复，更喜欢 CSS 解决方案，但 JQ 也可以作为替代方案

标签： jquery html css animation web

【解决方案1】：

我想是这样的https://jsfiddle.net/7kjznsty

<ul>
    <li>11111111</li>
    <li>2222
      <br>2222</li>
    <li>33333333</li>
    <li>44444444</li>
    <li>55555555</li>
    <li>66666666</li>
</ul>

CSS

li:nth-child(3) {
  margin-top: 35px;
  animation: anom2 3s ease-out infinite;
}

li:nth-child(2) {
  position: absolute;
  animation: anom 3s ease-out infinite;
}

@keyframes anom {
  50% {
    transform: translateY(200%);
  }
}

@keyframes anom2 {
  50% {
    margin-top: 0;
  }
}

【讨论】：

【解决方案2】：

好的，我知道这不是一个很好的答案，这只是这个特定案例的概念想法，听起来很有趣，可以尝试一下，但是如果只有 CSS，你可以尝试这样的事情并解决问题必须的。

我们的想法是根据边距移动内容，因为它们可以通过 CSS 进行动画处理。

li{
  transition:all 1s ease;
  line-height:20px;
  }
ul:hover li.test{
  margin-bottom:-120px;
  margin-top:80px;
}

JSFIDDLE

【讨论】：

像那个动画键少的方法。能回到原来的位置吗？