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>

了解这些元素水平放置在彼此旁边非常重要（显示：内联块）。

现在，当我点击按钮时，我会显示这些元素，这不是问题。这是通过以下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元素的内容是动态的。

这是一个更好理解它的小提琴：

http://jsfiddle.net/dw4Lz8qe/

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

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

亲切的问候，

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

只要您的<li>可以使用固定的，就可以使用css。检查您的更新小提琴 - 您可能希望使用它来深入了解此事。问题是，您无法在width: 0和width: auto之间进行转换，因为我所知道的任何浏览器都不支持此功能。

http://jsfiddle.net/dw4Lz8qe/1/

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

2 个答案: