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

重要的是要知道這些元素在水平方向上彼此相鄰放置（顯示：行內塊）。

現在，當我單擊按鈕時，將顯示這些元素，這不是問題。 這是通過以下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動畫可能會解決您的問題：

 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> 

Answer 2

只要您的<li>可以固定，它就可以與CSS一起使用。 檢查您更新的小提琴-您可能希望使用它來更深入地研究問題。 問題是，您不能在width: 0和width: auto之間width: auto因為我所知道的任何瀏覽器都不支持。

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