时间戳

首页 > 解决方案 > Textillate JS-JQuery 动画不是选中的（而且总是一样的）

javascript - Textillate JS-JQuery 动画不是选中的（而且总是一样的）

问题描述

我正在使用textillate.js向文本添加动画。我的 html 页面看起来像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Textillate</title>
    <link rel="stylesheet" href="animate.min.css">

    <script src="jquery-3.5.1.min.js"></script>
    <script src="jquery.lettering.js"></script>
    <script src="jquery.textillate.js"></script>
</head>
<body>
    <div class="tlt">
        Hello world
    </div>

    
    <script>
        $('.tlt').textillate({ in: { effect: 'bounceInDown' } });
    </script>
</body>
</html>

其中包含的脚本和 css 取自以下链接：

问题是，无论我effect在in对象中设置什么，结果始终是默认的文本动画：字符从左到右一个接一个地出现，我可以控制出现字母的顺序（例如 settingshuffle: true等。 )，但不是动画类型。

这几乎是 textillate 在他的 github 页面上提供的示例代码，所以我不知道问题出在哪里。

标签： javascriptjqueryanimationjquery-textillate

解决方案

我认为问题与 animate.css 参考有关，我对其进行了更改并且它可以工作。希望能帮助到你。

    $('.tlt').textillate({ in: { effect: 'flipInY' } });

    $('.tlt2').textillate({ in: { effect: 'rollIn' } });

    $('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>

<div class="tlt">
        Hello world
</div>


<div class="tlt2" >
        Hello world
</div>


<div class="tlt3" >
        Hello world
</div>

推荐阅读