主页 / 问题 / 1140311
Accepted
Fainor
Asked:2020-06-13 03:22:31 +0000 UTC2020-06-13 03:22:31 +0000 UTC

如何使用 Textillate.js 将动画应用于 Swiper.js 中的活动幻灯片？

  • 772

再会。

目标是让活动幻灯片在更改幻灯片时为文本的外观设置动画。幻灯片更改并出现新的活动幻灯片后，相同的动画也应该在其上工作。

我是如何做到的：将动画触发挂在 slideChange/transitionStart swiper 事件上，但是，这种方法不起作用，因为在动画完成后，它会停止重复。而且，只有在切换到第二张幻灯片时才执行，并且只针对第二张幻灯片，那么所有幻灯片都是静态的。

为了使文本动画化，我使用了 Textillate.js ，找到了所需的类并将动画附加到它：

mySwiper.on('slideChange', function() { 

$(function () {
  $('.tlt').textillate({
    in: {
      effect: 'fadeInUp'
    },
    loop: false,
  });
});

我想得到近似于这个滑块示例的结果

анимация

1 个回答

  1. Best Answer

    解决了这样的问题：

    1. 禁用自动启动动画。

    2. 当 transitionStart 事件触发时（slideChange 也很好），我在所需的块上运行 textillate('start')

    3. 结果，我在更改幻灯片时收到了动画调用。

      var $tlt = $(".tlt").textillate({ autoStart: false, in: { effect: "fadeInUp" },});

    该声明允许我们进一步访问所需的块并在其上运行动画。

    $(".tlt").textillate({


 in: {
    effect: "fadeInUp",
  },
    autoStart: true,
    loop: false,
});

    在这里，我们在页面加载时自动启动第一张幻灯片的动画。

    mySwiper.on("transitionStart", function () {
  $tlt.textillate("start");
  $(function () {
    $(".tlt").textillate({
      in: {
        effect: "fadeInUp",
      },
      autoStart: false,
      loop: false,
      initialDelay: 300,
    });
  });
});

    感谢 Swiper 事件，我们为每张新幻灯片调用动画。

    • 1

相关问题