2017-06-13 70 views
-1

我正在嘗試爲現在幾周創建一個特定的解決方案,並且我已經嘗試了很多事情,但我不確定是否有可能實現。我需要你的意見,並指出我正確的做法。下面我想創建:使用tile佈局的CSS過渡動畫有可能實現?

最初有一個tile佈局中的卡一定數量(比如12)被放置在4x3的網格:現在

Initial State

,如果用戶點擊瓷磚(專欄3),狀態更改爲以下幾點:

選擇瓷磚擴展等瓷磚對齊得到一個下面的另一個右側: enter image description here

挑戰是我想創建一個轉換從每個瓷磚的初始狀態到每個瓷磚在右邊對齊的狀態。與此同時,點擊一個貼圖時,它會展開。 注意 - 沒有突然變化的位置,沒有重新加載頁面,最好沒有JS(我想寫一個純CSS的解決方案)。一切順利地動畫到新的位置。在第二個屏幕上,如果選擇了不同的貼圖(從右側開始),則擴展項目將縮小並進入右側堆棧,而選定項目將展開並取代當前展開的(B3)。

如果你能指出我正確的方向,這將是很大的幫助。

謝謝。

+0

答案是否定的。不與CSS。 –

+0

爲什麼downvote?這與這個網站沒有關係,或者這個問題不夠描述? –

+0

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**](http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,無論是通過谷歌或通過搜索,嘗試和。如果您仍然遇到麻煩,請返回**您的代碼**並解釋您所嘗試的內容。 –

回答

-1

您應該檢查css flexbox。 使用「訂單」屬性,您可以爲每個方框的訂單從2到8, ,每次選擇一個方框時,您將其順序更改爲1,並且您還可以更改其尺寸和顏色。

但是,我不認爲你只能使用'點擊'操作。 我會推薦使用JS來實現你想要的。

希望它有幫助