Question

我在一个项目上使用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

Answer 1

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

$ element.textillate（'start'）-手动启动/重新启动textillate

$ element.textillate（'stop'）-手动暂停/停止纺织

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

编辑

我可以在以下代码笔中使用它：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

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

1 个答案: