CSS对每个子元素都有不同的转换延迟，但当转换发生逆转时，则反转延迟。

Question

我想做一个下垂的动画。当下拉列表正在展开时，每个list元素的延迟应该比前一个稍微多一点。当它收缩时，这些延迟应该以相反的顺序发生。

即：

展开时子元素的延迟：

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

收缩时子元素的延迟：

1. 100
2. 50毫秒
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>

​