CSS为每个子元素提供不同的过渡延迟，但在过渡反转时反转延迟[关闭]答案

【问题标题】：CSS different transition delay for each child element, but reverse the delays when the transition reverses [closed]CSS为每个子元素提供不同的过渡延迟，但在过渡反转时反转延迟[关闭]
【发布时间】：2019-01-03 21:21:03
【问题描述】：

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

即：

扩展时子元素的延迟：

0ms
50 毫秒
100 毫秒

收缩时子元素的延迟：

100 毫秒
50 毫秒
0ms

我可以用一个简单的nth-child 语句来编写扩展逻辑：

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

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

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

【问题讨论】：

显示完整代码。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： css animation delay transition

【解决方案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>

【讨论】：