0

如果一个element有类，.stagger那么我正在尝试执行一个动画来一张一张地显示卡片。

在我当前的演示中，cards所有这些都一起淡入淡出。即使我指定了delay?

我怎样才能让卡片一张一张出现？

  const boxes = gsap.utils.toArray('.stagger');

  boxes.forEach((box, i) => {
    const anim = gsap.fromTo(box, {
      autoAlpha: 0,
      y: 50
    }, {
      duration: 1,
      autoAlpha: 1,
      y: 0,
      delay: 0.5,
    });
    ScrollTrigger.create({
      trigger: box,
      animation: anim,
      toggleActions: 'play none none none',
      once: true,
    });
  });
.section{
  background: lightblue;
  padding: 100px 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<div class="section">
  <div class="container">
    <div class="row">

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

    </div>
  </div>
</div>

4

1 回答 1

1

在我当前的演示中，所有卡片都一起淡入淡出。即使我指定了延迟？

每张卡都有0.5s延迟，所以会一起移动。

使用基于当前卡片索引的延迟：

delay: 0.5 + (0.5 * i)

所以每张卡片都会被延迟（0.5s每个索引+半秒）

  const boxes = gsap.utils.toArray('.stagger');

  boxes.forEach((box, i) => {
    const anim = gsap.fromTo(box, {
      autoAlpha: 0,
      y: 50
    }, {
      duration: 1,
      autoAlpha: 1,
      y: 0,
      delay: 0.5 + (0.5 * i),
    });
    ScrollTrigger.create({
      trigger: box,
      animation: anim,
      toggleActions: 'play none none none',
      once: true,
    });
  });
.section{
  background: lightblue;
  padding: 100px 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<div class="section">
  <div class="container">
    <div class="row">

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

      <div class="col-4">
        <div class="card text-center stagger">
          Card
        </div>
      </div>

    </div>
  </div>
</div>

于 2022-01-18T15:08:27.623 回答