javascript - 每次打开模式时重复JS Textillate函数

我在一个项目上使用uikit模态。打开模态时，我还使用JS Textillate为文本设置动画。但是，如果模式连续关闭并再次打开，我希望对文本进行动画处理。目前，它仅在第一次打开模态时动画一次，而在关闭并再次打开时，动画不会再次运行。
这是下面的JavaScript代码：

$(".uk-modal-full").on('show', function(){
  var $title = $(".txt").textillate({
    // in animation settings.
    in: {
      effect: "fadeIn", // set the effect name
    },
    // out animation settings.
    out: {
      effect: "fadeOut",
      delayScale: 0,
      delay: 0,
    },
    type: "char",
    autoStart: true,
  });

  var $title = $(".txt2").textillate({
    // in animation settings.
    in: {
      effect: "fadeIn", // set the effect name
    },
    // out animation settings.
    out: {
      effect: "fadeOut",
      delayScale: 0,
      delay: 0,
    },
    type: "char",
    autoStart: true,
  });
});

我想也许可以在模式关闭时删除该功能，以便在再次打开时可以重复该功能。我不确定这是否可行，因为我只是一名Jquery学习者。

$(".uk-modal-full").on('hide', function(){
  // code here?
});

Textillate的完整选项在这里https://github.com/jschr/textillate

更新

谢谢！我在这里创建了一个代码笔，使用您的示例在模态下测试我的完整代码。它似乎正在工作，但存在一些问题。当我使用$element.textillate('in')和$element.textillate('out')时，其他选项不起作用（例如initialDelay）。看来只能控制"in"和"out"选项。当我使用$element.textillate('start')和$element.textillate('stop')时，其他选项都起作用，但是当重新打开模式时，将在动画之前首先短暂加载文本。

请在此处查看codepen-https://codepen.io/ajaxthemestudios/pen/XWJRBbW

最佳答案

浏览Textillate的自述文件，我认为这是您需要的：


  $ element.textillate（'start'）-手动启动/重启textillate
  
  $ element.textillate（'stop'）-手动暂停/停止textillate
  
  $ element.textillate（'in'）-触发当前文本的动画
  
  $ element.textillate（'out'）-触发当前文本的out动画


所以我会做一些像先定义动画（事件函数之外）的操作

var title1 = $(".txt").textillate({
    // in animation settings.
    in: {
      effect: "fadeIn", // set the effect name
    },
    // out animation settings.
    out: {
      effect: "fadeOut",
      delayScale: 0,
      delay: 0,
    },
    type: "char",
    autoStart: false,
  });

var title2 = $(".txt").textillate({
    // in animation settings.
    in: {
      effect: "fadeIn", // set the effect name
    },
    // out animation settings.
    out: {
      effect: "fadeOut",
      delayScale: 0,
      delay: 0,
    },
    type: "char",
    autoStart: false,
  });

然后在事件函数中：

$(".uk-modal-full").on('show', function(){
   title1.textillate('in');
   title2.textillate('in');
}

编辑

我在以下Codepen中工作：https://codepen.io/thomas-short/pen/zYxdzWY

反复单击click对其进行测试。

编辑2

文本短暂可见的问题似乎是库的局限性。我找不到使用他们提供的工具解决问题的方法。我设法使其起作用的唯一方法是自己控制它：

$(".uk-modal-full").on('show', function(){
    title1.textillate('start');

    $(".txt2").hide();

    setTimeout(() => {
      $(".txt2").show();

      title2.textillate('start');
    }, 1500);
})

然后从选项中删除initialDelay