如何在AnimXYZ中实现元素交错进入、同步退出动画？

当前代码中，父元素的stagger-5属性会同时作用于xyz-in和xyz-out动画，导致退出时元素也会交错播放。要实现进入交错、退出同步，需要分离进入和退出的 stagger 配置，以下是两种可行方案：

方案1：动态控制父元素的stagger属性 #

进入动画保留父元素的stagger实现交错，退出时临时移除父元素的stagger属性，让所有元素同步执行退出动画，动画结束后再恢复stagger属性以保证下次进入仍能交错。

修改后的HTML（无需改动） #

<div class="diagram" xyz="duration-6 ease-in stagger-5 narrow-75% fade-100% origin-left left-2">
    <div class="rectangle xyz-in">
      <div class="text">whatever the text is, this is a sample</div>
    </div>
    <div class="rectangle xyz-in">
      <div class="text">whatever the text is, this is a sample</div>
    </div>
</div>

修改后的JS #

const diagram = document.querySelector(".diagram");
const rs = document.querySelectorAll(".rectangle");
const staggerConfig = "stagger-5"; // 保存原始交错配置

setInterval(() => {
  const isEntered = rs[0].classList.contains("xyz-in");
  
  if (isEntered) {
    // 退出阶段：移除父元素的交错配置
    const currentXyz = diagram.getAttribute("xyz").replace(staggerConfig, "").trim();
    diagram.setAttribute("xyz", currentXyz);
    // 切换退出类
    rs.forEach(r => {
      r.classList.remove("xyz-in");
      r.classList.add("xyz-out");
    });
    // 动画结束后恢复交错配置（duration-6对应600ms）
    setTimeout(() => {
      diagram.setAttribute("xyz", `${currentXyz} ${staggerConfig}`);
    }, 600);
  } else {
    // 进入阶段：直接切换类，父元素交错配置生效
    rs.forEach(r => {
      r.classList.remove("xyz-out");
      r.classList.add("xyz-in");
    });
  }
}, 5000);

方案2：给退出动画单独配置无交错 #

通过给每个子元素添加xyz-out="stagger-0"属性，直接覆盖父元素的交错配置，让退出动画同步执行。

修改后的HTML #

<div class="diagram" xyz="duration-6 ease-in stagger-5 narrow-75% fade-100% origin-left left-2">
    <div class="rectangle xyz-in" xyz-out="stagger-0">
      <div class="text">whatever the text is, this is a sample</div>
    </div>
    <div class="rectangle xyz-in" xyz-out="stagger-0">
      <div class="text">whatever the text is, this is a sample</div>
    </div>
</div>

JS保持原有逻辑即可 #

const rs = document.querySelectorAll(".rectangle");

setInterval(() => {
  rs.forEach((r) => {
    r.classList.toggle("xyz-in");
    r.classList.toggle("xyz-out");
  });
}, 5000);

内容的提问来源于stack exchange，提问作者Cassidy