如何按顺序动画菜单元素

Question

我非常喜欢Jacob's Creek解决移动网站的方式，我特别喜欢移动菜单。如何创建一个类似的菜单，其中元素出现在他们的兄弟姐妹之后（并且因此消失）？我想在菜单上普遍应用这个，所以如果用户点击子菜单/下拉菜单，当前项目会顺序消失，下一个项目也会顺序显示？

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

http://code.tutsplus.com/tutorials/how-to-create-a-resumable-video-uploade-in-node-js--net-25445

任何帮助表示赞赏！ ：）

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个项目的菜单。那时，你还有其他问题。