JavaScript和Vue分别实现逐字弹出(打字机)效果

更新时间：2024年01月10日 10:49:09 作者：加油乐

这篇文章主要为大家详细介绍了如何通过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打字机的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS如何把字符串转换成json
这篇文章主要介绍了JS如何把字符串转换成json,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
深度探索JavaScript中JSDoc文档注释的具体使用
JSDoc 是一种 JavaScript 文档注释规范,它允许开发者为 JavaScript 代码添加注释,下面就跟随小编一起来学习一下它的具体使用吧
2024-02-02
js控制台输出的方法(详解)
下面小编就为大家带来一篇js控制台输出的方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
javascript匀速动画和缓冲动画详解
这篇文章主要为大家详细介绍了javascript匀速动画和缓冲动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Bootstrap按钮组实例详解
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组，感兴趣的朋友一起看看吧
2017-07-07
JS实现简单留言板功能
这篇文章主要为大家详细介绍了JS实现简单留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JS函数的返回值如何使用
函数是一块js代码块,被定义一次但可以执行和调用多次,js中的函数也是对象可以像其他对象那样操作和执行,js函数也被称为函数对象,本文给大家介绍JS函数的返回值如何使用,感兴趣的朋友跟随小编一起看看吧
2024-02-02
某页码显示的helper 少量调整，另附js版
某页码显示的helper 已经少量调整，另附js版，需要的朋友可以参考下。
2010-09-09
element中el-switch的v-model自定义值的实现
在el-switch中设置active-value和inactive-value属性,接受Boolean, String或Number类型的值,本文就来介绍一下element中el-switch的v-model自定义值的实现,感兴趣的可以了解一下
2023-11-11
JavaScript基于自定义函数判断变量类型的实现方法
这篇文章主要介绍了JavaScript基于自定义函数判断变量类型的实现方法,结合实例形式分析了javascript判断变量类型的自定义函数定义与使用方法,并针对不同浏览器给出了相关的分析与说明,需要的朋友可以参考下
2016-11-11