无论如何都知道类型化JS效果是否完整?



嗨,我正在使用Type Js库创建打字效果,我想知道是否有任何方法可以知道Typed Js效果是否完成?

任何形式的帮助都是非常感激的:)

var typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<title>Document</title>
</head>
<body>

<div class="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>

<span class="typed"></span>
</body>
</html>

快速浏览一下库的文档就会发现,有一个onComplete参数接受一个函数:

在onComplete中,你可以设置一个变量来标记动画是否完成。

let isEffectComplete = false;
const typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false,
onComplete: () => { isEffectComplete = true },
});

最新更新