我正在一个项目中使用 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
最佳答案
浏览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
关于javascript - 每次打开模态时重复 JS Textillate 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59509886/