css 在AnimXYZ中，可以交错动画进入，但不交错动画出来吗？

xzabzqsa 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(146)

我这里有this CodePen，我在使用AnimXYZ。我试着弄清楚我是否可以在动画中交错，但使所有的元素在同一时间出去。我还没有能够找到任何文档或任何东西。
到目前为止我所拥有的相关代码：

// 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 rs = document.querySelectorAll(".rectangle");

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

css

来源：https://stackoverflow.com/questions/74241526/can-you-stagger-animation-in-but-unstaggered-on-out-in-animxyz

1条答案

按热度按时间

bzzcjhmw1#

我通过将间隔分解为多个部分而不是一次切换所有内容来解决这个问题：

const rs = document.querySelectorAll(".rectangle");
let count = 1;

setInterval(() => {
  if (count <= 5) {
    count += 1;
  } else if (count === 6) {
    count += 1;
    flip();
  } else {
    count = 0;
    flip();
  }
}, 1000);

function flip() {
  rs.forEach((r) => {
    r.classList.toggle("xyz-in");
    r.classList.toggle("xyz-out");
  });
}

赞(0）回复(0）举报 2023-01-10

我来回答

css 在AnimXYZ中，可以交错动画进入，但不交错动画出来吗？

1条答案

相关问题

热门标签

最新问答