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

Question

我使用 splide.js 旋转木马，我想使用 animate.css.

为幻灯片之间的文本标题添加动画效果

我使用幻灯片事件： https://splidejs.com/guides/events/

这是我使用的代码：

document.addEventListener( 'DOMContentLoaded', function () {

  var splide = new Splide( '.slider', {
    type: 'fade',
    perPage: 1,
    autoplay: true,
    focus: 'center',
    trimSpace: false,
    rewind: true,

  } ).mount();

  splide.on( 'active', function() { 
    const element = document.querySelector('.title');
    element.classList.add('animate__animated', 'animate__fadeInRight');
    } );

  splide.on( 'inactive', function() {   
    const element = document.querySelector('.title');
    element.classList.remove('animate__animated', 'animate__fadeInRight');  
    } );

});

Codepen 示例： https://codepen.io/haralake/pen/YzQObEK

第一张幻灯片获得 class 但其他幻灯片没有。我想我使用事件的方式不对，但我不知道问题出在哪里。

Answer 1

我在自己的网站上使用 splide，这是我熟悉它的唯一原因，但他们的文档太糟糕了。事件回调函数有一个事件对象，其中包含触发事件（例如变为活动或非活动）的幻灯片索引。是的，活动事件会在每次幻灯片更改时执行运行，但请查看您要查询的元素。你用 class 'title' 获取第一个元素，不管什么是活动的。以下应该做你想做的。

splide.on( 'active', function(e) {  
    const element = document.querySelectorAll('.title');
    element[e.index].classList.add('animate__animated', 'animate__fadeInRight');
});

splide.on( 'inactive', function(e) {    
    const element = document.querySelectorAll('.title');
    element[e.index].classList.remove('animate__animated', 'animate__fadeInRight');  
});

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

Splide.js text animation between slides with animate.css classes

javascript

carousel

animate.css

splidejs