每个子元素的CSS过渡延迟都不同，但是当过渡反向时，延迟会反向

Question

我想为下拉菜单设置动画。当下拉列表为 expanding 时，每个列表元素的延迟时间应比前一个稍长。当签约时，这些延迟应该以相反的顺序发生。

即：

展开时对子元素的延迟：

1. 0ms
2. 50ms
3. 100ms

签约时对子元素的延迟：

1. 100ms
2. 50ms
3. 0ms

我可以使用简单的nth-child语句对扩展逻辑进行编程：

ul li:nth-child(2) {
    transition-delay: 50ms;
}
ul li:nth-child(3) {
    transition-delay: 100ms;
}

但是我不确定如何制作收缩动画。

解决此问题的最佳方法是什么？

Answer 1

您可以在其展开或折叠时添加一个类，并根据该类以其他方式播放动画：

var btn = document.querySelector('button');
var menu = document.querySelector('ul');

btn.addEventListener('click', function() {
  menu.classList.toggle('hidden');
});

ul.hidden li {
  opacity: 0;
}
ul li {
  opacity: 1;
}

/* Expand */
ul li:nth-child(1) {
  transition-delay: 200ms;
}
ul li:nth-child(2) {
  transition-delay: 400ms;
}
ul li:nth-child(3) {
  transition-delay: 600ms;
}

/* Collapse */
ul.hidden li:nth-child(1) {
  transition-delay: 600ms;
}
ul.hidden li:nth-child(2) {
  transition-delay: 400ms;
}
ul.hidden li:nth-child(3) {
  transition-delay: 200ms;
}

<button type="button">Click</button>
<ul class="hidden">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>