Javascript 如何顺序设置菜单元素的动画

我真的很喜欢雅各布溪解决他们的移动网站的方式，我特别喜欢移动菜单。我如何创建一个类似的菜单，其中元素出现在其兄弟元素之后（然后消失）？我想在菜单上普遍应用这一点，因此，如果用户点击子菜单/下拉菜单，当前项目会按顺序消失，下一个项目也会按顺序出现

我不想通过css手动添加延迟，因为这会使它无法扩展。我需要一些我可以在其他元素上重用的东西

---

感谢您的帮助！：）

我认为相关的部分是：

.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个以上项目的菜单。在这一点上，你还有其他问题