javascript - 如何按顺序为菜单元素制作动画

Question

我真的很喜欢 Jacob's Creek 解决他们的移动网站的方式，我特别喜欢移动菜单。我如何创建一个类似的菜单，其中元素出现在它们的 sibling 之后(并因此消失)？我想在菜单上普遍应用这个，所以如果用户点击子菜单/下拉菜单，当前元素会依次消失，下一个元素也会依次出现吗？

我不想通过 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 项的菜单。那时，您还有其他问题。