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

Question

我正在一个项目中使用 uikit modal。我还使用 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

Answer 1

浏览Textillate的自述文件，我认为这部分就是您所需要的:

$element.textillate('start') - Manually start/restart textillate

$element.textillate('stop') - Manually pause/stop textillate

$element.textillate('in') - Trigger the current text's in animation

$element.textillate('out') - Trigger the current text's out animation

所以我会做一些事情，比如首先定义动画(在事件函数之外)

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');
}

编辑

我让它在这个代码笔中工作:https://codepen.io/thomas-short/pen/zYxdzWY

通过重复点击点击来测试它。

编辑2

文本短暂可见的问题似乎是该库的限制。我无法找到使用他们提供的工具来解决它的方法。我设法让它发挥作用的唯一方法是我自己控制它:

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

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

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

并从选项中删除initialDelay