常规

动画打字以~400字节表示: blowfish: of JavaScript.

• 零依赖关系
• 麻省理工学院执照 →
• 爱莫吉支持
• 智能删除 : 只删除需要删除的内容
• 暂停 : 步骤间暂停
• 循环 : 很容易从任意点循环
• 正在等待中 : 等待任意的承诺
• 人类: 输入速度略有变化

民主 ∗

安装

npm install @camwiegert/typical

API 密码

type(target: HTMLElement, ...steps: any[]) => Promise<void>;

模块输出一个函数, type,它将目标要素作为其第一个论据,并将任何额外论据作为执行步骤。 其他参数根据类型执行动作:

• string 参数将输入
• number 参数将暂停, 以毫秒计
• function 参数将调用目标元素作为参数
• Promise 参数将等待解析

使用量

最基本的使用 type 正在提供目标元素和要键入的字符串.

import { type } from '@camwiegert/typical';

type(element, 'text');

暂停

为了在任意一点暂停打字,通过数毫秒暂停.

type(element, 'Hello', 1000, 'Hello world!');

循环

为了循环,通过 type 在你想要开始循环的时候 作为自己的参数 可以用别名 type 作为 loop 明确.

import {
    type,
    type as loop
};

const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];

type(element, ...steps, loop);

要循环一定数量,请通过多步.

type(element, ...steps, ...steps, ...steps);

等待时

过后a Promise, (中文(简体) ), type 等它解决后再继续 因为 type 本身返回 a Promise,这意味着你可以等待一组步骤完成,然后开始另一个步骤.

const init = type(target, 'In a moment...', 500);

type(target, init, 'start', 500, 'looping', loop);

职能

函数参数被传递到目标元素上,可用于在步骤之间运行目标元素. 如果你还回去 Promise, (中文(简体) ), type 等着它解决.

const toggle = (element) =>
    element.classList.toggle('is-typing');

type(target, toggle, 'Type me', toggle);

支助

• 颜色
• 边缘
• 火花
• 萨法里
• Internet 浏览器