Javascript 汉堡菜单导航项动画

这将在汉堡菜单导航菜单项上显示动画效果。 单击汉堡包菜单，每个导航菜单项上都会出现动画。
我试着重新创造一个。我不明白我哪里出错了

每次单击汉堡包菜单时，都会播放动画

.nav菜单{
背景色：红色；
}
.导航菜单ul li a{
颜色：#fff；
文字装饰：无；
边缘底部：20px；
}
李：第一个孩子{
动画：bringback 1s 0s向前；
}
李：第n个孩子（2）{
动画：布林巴克1秒2向前；
}
.nav菜单li:n子菜单（3）{
动画：bringback 1s 3s向前；
}
.nav菜单li:n子菜单（4）{
动画：bringback 1s 4s向前；
}
.nav菜单li:n子菜单（5）{
动画：bringback 1s 5s向前；
}
.nav菜单li:n子菜单（6）{
动画：布林巴克1秒6秒向前；
}
.nav菜单li:n子菜单（7）{
动画：布林巴克1秒7秒向前；
}
.nav菜单li:n子菜单（8）{
动画：布林巴克1秒8秒向前；
}
.nav菜单li:n子菜单（9）{
动画：布林巴克1秒9秒向前；
}
.nav菜单li:n子菜单（10）{
动画：布林巴克1秒10秒向前；
}
@关键帧布林巴克{
到{
不透明度：1；
文本缩进：25px；
}
}

不要为任意数量的项目硬编码CSS li:N子项（N）很难维护

顺序交错延迟动画 使用CSS变量通过同时使用填充模式

创建交错动画

，并在CSS

calc（）中使用该CSS变量控制延迟：


#检查ul li{
动画：同时设置350毫秒轻松计算（var（--i）*200毫秒）的动画；
}
@关键帧设置动画{
0% {
不透明度：0；
转换：translateX（-2em）；
}
100% {
不透明度：1；
}
}











为了完成一个完整的示例，我认为您需要混合使用一些JavaScript

让我们通过首先创建必要的组件来解决此问题，以正确显示视频中的导航：



并相应地设置样式：

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体系列：“Roboto”；
}
#切换按钮{
背景：无；
颜色：继承；
边界：无；
填充：0；
字体：继承；
光标：指针；
大纲：继承；
}
.导航{
背景：#1f2937；
}
.菜单按钮{
颜色：白色；
宽度：2.3rem；
高度2.3rem；
}

我们接下来需要做的是为面板、音量控制器和侧菜单准备必要的标记



菜单项#1
菜单项#2
菜单项#3
菜单项4


当然，还有风格：

.overlay-container.hidden {
  display: none;
}

.overlay-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overlay.fade {
  opacity: 0.6;
}

.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: black;
  transition: opacity 300ms ease-out;
}

.panel.slide {
  transform: translateX(0%);
}

.panel {
  position: absolute;
  height: 100vh;
  width: 18rem;
  background: #c00136;
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}

.menu {
  padding: 1rem 1rem;
  list-style-type: none;
}

.menu li.hidden {
  visibility: hidden;
}

.menu li {
  color: #f7f7f7;
  margin: 1rem 0;
}

.menu li.fadeInLeft {
  animation: fadeInLeft 350ms ease calc(var(--i) * 200ms) both;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }

  100% {
    opacity: 1;
  }
}

现在，使用这段javascript，您可以将所有内容协调在一起。注意我是如何使用一些转场和动画的，这样我们可以按顺序计时

let button = document.getElementById("toggle-button");
let backbox = document.querySelectorAll('.overlay-container')[0];
let overlay = document.querySelectorAll('.overlay')[0];
let panel = document.querySelectorAll('.panel')[0];

/*
 * Since transitions from 'hidden'
 * to 'block' don't animate we need 
 * to trigger a browser repaint by
 * asking the element for it's height
 */
function forceRepaint(element) {
  return element.offsetHeight;
}

button.addEventListener("click", function () {
  backbox.classList.remove('hidden');
  forceRepaint(backbox);
  overlay.classList.add('fade');
  panel.classList.add('slide');
});

panel.addEventListener("transitionend", function () {
  document.querySelectorAll('.menu li').forEach(node => {
    node.classList.remove("hidden");
    node.classList.add('fadeInLeft');
  })
});

我建议你循序渐进地解决这些问题，这样你将来也能自己解决这些问题。像这样的问题一开始看起来很复杂，但你必须把它们分解成更小的部分

最后，以下是所有这些是如何结合在一起的


let button=document.getElementById（“切换按钮”）；
让backbox=document.querySelectorAll（'.overlay容器'）[0]；
let overlay=document.querySelectorAll（'.overlay'）[0]；
让panel=document.querySelectorAll（'.panel'）[0]；
/*
*因为从“隐藏”转换
*要“阻止”，我们需要的不是动画
*触发浏览器重新绘制的步骤
*询问元素的高度
*/
函数forceRepaint（元素）{
返回元素。远视；
}
addEventListener（“单击”，函数（）{
backbox.classList.remove（'hidden'）；
forceRepaint（backbox）；
overlay.classList.add（'fade'）；
panel.classList.add（'slide'）；
});
panel.addEventListener（“transitionend”，函数（）{
document.querySelectorAll（'.menu li'）.forEach（node=>{
node.classList.remove（“隐藏”）；
node.classList.add（'fadeInLeft'）；
})
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体系列：“Roboto”；
}
#切换按钮{
背景：无；
颜色：继承；
边界：无；
填充：0；
字体：继承；
光标：指针；
大纲：继承；
}
.导航{
背景：#1f2937；
}
.菜单按钮{
颜色：白色；
宽度：2.3rem；
高度2.3rem；
}
.overlay-container.hidden{
显示：无；
}
.覆盖容器{
溢出：隐藏；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
}
.覆盖，褪色{
不透明度：0.6；
}
.覆盖{
位置：绝对位置；
宽度：100vw；
高度：100vh；
不透明度：0；
背景：黑色；
过渡：不透明度300毫秒缓解；
}
.panel.slide{
转化：translateX（0%）；
}
.小组{
位置：绝对位置；
高度：100vh；
宽度：18rem；
背景：#c00136；
转化：translateX（-100%）；
转换：转换300毫秒缓解；
}
.菜单{
填充：1rem1rem；
列表样式类型：无；
}
.菜单李{
可见性：隐藏；
}
李先生{
颜色：#f7f7f7；
保证金：1rem 0；
}
.menu li.fadeInLeft{
动画：fadeInLeft 350ms轻松计算（var（--i）*200ms）两者；
}
@关键帧淡入淡出{
0% {
不透明度：0；
转换：translateX（-2em）；
}
100% {
opac