如何順序動畫菜單元素

Question

我真的很喜歡Jacob's Creek解決他們的移動網站的方式，我特別喜歡手機菜單。我怎麼能創建一個類似的菜單，其中的元素出現在他們的兄弟姐妹之後（並且像這樣消失）？我想在菜單上普遍應用，所以如果用戶點擊子菜單/下拉菜單，當前項目會順序消失，而下一個項目會按順序顯示？

我不想通過css手動添加延遲，因爲這會使其不可擴展。我需要一些我可以在其他元素上重用的東西。

http://www.jacobscreek.com/gbl/about-us/

任何幫助表示讚賞！ :)

Answer 1

我認爲相關的位是：

.nav__item-wrapper > * { 
    transition: transform .5s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1); 
} 

，然後在菜單中，他們設置了遞增的動畫時間每個項目：

.nav-level--opened .nav__item-wrapper:nth-child(1) > * { 
    transition-delay: .12s; 
} 
.nav-level--opened .nav__item-wrapper:nth-child(2) > * { 
    transition-delay: .16s; 
} 
// etc. 
// all the way up to 20 with a delay of .88s 

由於其移動菜單隻顯示4或所以你不需要更多的菜單項，但它在那裏。

延遲的可擴展性不是一個問題，你不可能擁有超過20項的菜單。那時候，你還有其他問題。