javascript - 使用 CSS3 动画移动 UL/LI 元素

Question

我想使用 CSS3 过渡创建一些动画。想象一下以下 UL/LI 元素:

<ul>
    <li class="green" id="green" style="display: none;">Contents 1</li>
    <li class="red" id="red" style="display: none;">Contents 2</li>
    <li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>

重要的是要知道这些元素彼此水平相邻放置(显示:内联 block )。

现在，当我点击一个按钮时，我会显示这些元素，这不是问题。这是通过以下 HTML 代码完成的:

<a href="#" onclick="$('#green').show();">Make contents 1 visible</a>
<a href="#" onclick="$('#red').show();">Make contents 2 visible</a><br/>
<a href="#" onclick="$('#yellow').show();">Make contents 3 visible</a>

当我想在上面放一个动画时，我可以通过向元素添加某个类来实现，CSS 会像这样:

.animate { transition: all linear 5s; opacity: 1; display: inline-block; }

但是现在，让我们将 LI 元素标记为绝对元素，以便它们都显示在同一位置。

我现在想要的动画如下:

• 当我启用第 2 项时，它会淡入。
• 然后当我启用第 1 项时，它会淡入，与此同时，第 2 项应该开始向右移动，直到第 1 项占据所需的所有空间。

但是，更麻烦的是，这两个元素都没有固定的，因为 UL LI 元素的内容是动态的。

这里有一个 fiddle 可以更好地理解它:

http://jsfiddle.net/dw4Lz8qe/

所以，我想淡入淡出一个元素，但是如果已经有一个元素可见，则可见元素应该开始向右移动，直到完全占用淡入元素所需的空间。

所以，我希望这个问题很清楚。

亲切的问候，

Answer 1

动画 font-size 可能会解决您的问题:

ul li {
  display: inline-block; 
  opacity: 0;
  font-size: 0px;
  transition: all linear 0.5s;
}

.green {background-color: green;}
.red {background-color: red;}
.yellow {background-color: yellow;}

.animate {
  opacity: 1;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#green').toggleClass('animate') ">Toggle contents 1</button>
<button onclick="$('#red').toggleClass('animate')   ">Toggle contents 2</button>
<button onclick="$('#yellow').toggleClass('animate')">Toggle contents 3</button>

<ul class="padding: 0px; margin: 0px;">
  <li class="green" id="green">Contents 1</li>
  <li class="red" id="red">Contents 2</li>
  <li class="yellow" id="yellow">Contents 3</li>
</ul>