使用animate.css类实现幻灯片之间的Splide.js文本动画

<link rel="stylesheet" href="path/to/splide.css">
<link rel="stylesheet" href="path/to/animate.css">
<script src="path/to/splide.js"></script>

<div id="splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <h1 class="animate__animated animate__fadeIn">Slide 1</h1>
      </li>
      <li class="splide__slide">
        <h1 class="animate__animated animate__fadeIn">Slide 2</h1>
      </li>
      <li class="splide__slide">
        <h1 class="animate__animated animate__fadeIn">Slide 3</h1>
      </li>
    </ul>
  </div>
</div>

new Splide('#splide', {
  type: 'fade',
  perPage: 1,
  autoplay: true,
  interval: 3000,
  pauseOnHover: false,
  classes: {
    // 添加animate.css类到幻灯片元素
    slide: 'splide__slide animate__animated'
  },
  // 在幻灯片切换时添加/移除animate.css类
  on: {
    move: function (splide) {
      const slide = splide.Components.Elements.getSlide(splide.index);
      const animationClasses = 'animate__fadeIn';
      slide.classList.add(animationClasses);
      slide.addEventListener('animationend', function () {
        slide.classList.remove(animationClasses);
      });
    }
  }
}).mount();