Question

我已经对此做过相当多的研究，但还没有找到一个可扩展的特定答案，并且与我在项目中使用的库（animate.css，siema.js）的组合有关。

我基本上试图在幻灯片进入视图时在任何给定的幻灯片上创建一个元素。 Here is a jsfiddle

小提琴的外部资源包括animate.css和siema.js 请注意，对于通过三张幻灯片的第一次旋转（这些都是重复的），绿卡的动画可以正常工作。但这是基于幻灯片的持续时间和转换速度在{animation-duration：x}上实现的基本解决方案。

我想要达到的目标：使动画触发超出第一次旋转（在jsfiddle中，它们在第一次显示三张幻灯片后处于无限循环）。只有在幻灯片停止并移动到全屏视图时才会出现动画。然后在观看其他幻灯片时停止播放动画。以编程方式触发动画，可以适应不同的幻灯片间隔，幻灯片数量和幻灯片动画类型/时间。

我和我做过的事：我可以更改动画的@keyframe以使它们具有内置延迟，但这不是编程的，并且必须在每次添加或减少新幻灯片时重新完成，或者如果我要更改持续时间以任何方式滑动。

我还尝试使用jQuery和Siema.js API（mySiema.currentSlide和Siema.onChange）同时删除animate.css类并将其添加到我想要幻灯片更改的元素上。我相信这可能更接近正确的做法，但却没有成功。

下面我只插入我用于小提琴的js，因为stackoverflow说我无法链接到jsfiddle，除非我在问题中粘贴代码......？

    var mySiema = new Siema({
      selector: siema,
      duration: 2000,
      easing: 'ease-out',
      perPage: 1,
      startIndex: 0,
      loop: true,
      onInit: () => {},
      onChange: applyAnimation
    });

    setInterval(() => mySiema.next(), 4000)

在Siema.js轮播中更改幻灯片时重新触发animate.css动画

0 个答案: