JavaScript和Vue分别实现逐字弹出(打字机)效果
作者：加油乐
这篇文章主要为大家详细介绍了如何通过CSS、JavaScript和Vue分别实现逐字弹出(打字机)效果,文中的示例代码讲解详细,需要的小伙伴可以参考一下
特别注意：盒子为行内块及行内元素时光标同行显示，块级元素时为换行显示
一、CSS实现
- 相关公式：字体大小*动画步数=盒子总宽
- 动画forwards属性为停止在结束位置，替换为infinite则为无限循环动画
- 光标使用伪元素实现，通过opacity属性+动画实现光标闪烁效果
代码注释详解
<style>
@keyframes ballText {
0% {
width: 0;
}
100% {
width: 360px;
}
}
@keyframes symbolInput {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ballText {
width: 0;
font-size: 30px;
/* 强制文本一行显示 */
white-space: nowrap;
/* 移除部分隐藏，模拟视觉弹出效果 */
overflow: hidden;
/* background-color: aqua; */
/* 动画效果 共4秒分12步，每一步的宽度为字体的大小（宽度），停止在结束位置 */
animation: ballText 3s steps(12) forwards;
/* 替换为infinite则为无限循环动画 */
/* animation: ballText 4s steps(12) infinite; */
}
.ballText::after {
content: "|";
display: inline-block;
width: 0;
height: 100%;
animation: symbolInput 1s infinite;
}
</style>
<body>
<div class="ballText">测试打字机效果！</div>
</body>
二、JS实现
常规使用及注意事项
- 注意：盒子为块级元素时，光标换行显示；盒子为行内块或行内元素时，光标与文字同行显示
- 多个盒子同类名时，只有第一个盒子生效，后面的盒子不生效
- 第一个参数为盒子，第二个参数为配置对象
- 第一个参数类名、id名、标签名均可（尽量以id或唯一类名为参）
- 第二个参数为配置对象,可以设置速度、光标、循环等，其他用法可以参考typed.js官网自行扩展。
- 需要先引入再使用，
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
常规使用效果图例
代码注释详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 1.引入typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<body>
<!-- 2.定义盒子 -->
<div class="ballText"></div>
</body>
<script>
// 3.设置typed.js相关属性
var typed = new Typed(".ballText", {
strings: ["测试打字机效果！", "第二段文字效果！", "继续测试一段文字"],//输出的文字
//打字的速度。单位ms
typeSpeed: 200,
//设置是否循环，为true，开启循环
loop: true,
//打印开始前的延迟时间
startDelay: 0,
//打印结束后的延迟时间
backDelay: 2000,
//设置打字机是否显示光标，为true，显示光标
showCursor: true,
});
</script>
</html>
多行显示、换行、回退
- 在span标签内加入
white-space: pre-wrap样式，在strings内的语句中加入\n换行符可以实现换行 ^1000：打印完成^1000之前的文字后停顿，单位毫秒backSpeed控制回退退格速度，不写此属性即为不退格
多行显示及换行效果图例
多行显示及换行代码注释详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<body>
<span id="ballText" style="white-space: pre-wrap;line-height: 30px;"></span>
</body>
<script>
// 实现多行打印
var typed = new Typed("#ballText", {
// 打印完成^1000之前的文字后停顿，单位毫秒
strings: [
"测试打字机效果！\n^1000测试换行效果！\n^1000测试多行效果",
"第二段文字效果,\n^1000测试换行效果！\n^1000测试多行效果",
"继续测试一段文字,\n^1000测试换行效果！\n^1000测试多行效果"
],
// 打字速度
typeSpeed: 100,
// 退格速度
backSpeed:200
});
</script>
</html>
三、VUE实现（v2/v3通用）
1、下载命令
npm install typed.js
或者
yarn add typed.js
2、页面使用
其他属性及使用方法与原生同理，不做过多演示
效果图例
代码注释详解
<template>
<div class="box">
<div ref="typewriterElement"></div>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import Typed from "typed.js";
const typewriterElement = ref(null);
let typed = null;
onMounted(() => {
// 初始化typed.js实例
typed = new Typed(typewriterElement.value, {
strings: ["Hello, world!", "How are you?"],
// 打字速度
typeSpeed: 40,
// 退格速度
backSpeed: 20,
// 是否循环
loop: true,
});
});
// 在组件卸载时销毁 typed.js 实例
onUnmounted(() => {
if (typed) {
typed.destroy();
typed = null;
}
});
</script>
以上就是JavaScript和Vue分别实现逐字弹出(打字机)效果的详细内容，更多关于JavaScript Vue打字机的资料请关注脚本之家其它相关文章！