CSS 每个子元素的过渡延迟不同，但在过渡反转时反转延迟

Question

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

即：

扩展时子元素延迟：

0 毫秒
50 毫秒
100 毫秒

收缩时子元素延迟：

100 毫秒
50 毫秒
0 毫秒

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

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

但是我不知道收缩动画怎么做。

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

Answer 1

您可以在展开或折叠时添加 class 并根据该 class:

以另一种方式播放动画

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>

CSS 每个子元素的过渡延迟不同，但在过渡反转时反转延迟

CSS different transition delay for each child element, but reverse the delays when the transition reverses

css

animation

transition

delay