脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Vue打字机

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打字机的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论