一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

CSS/JS/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>

常规使用效果图例

  • CSS/JS/VUE分别实现逐字弹出(打字机效果)

代码注释详解

<!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控制回退退格速度,不写此属性即为不退格

多行显示及换行效果图例

CSS/JS/VUE分别实现逐字弹出(打字机效果)

多行显示及换行代码注释详解

<!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、页面使用

  • 其他属性及使用方法与原生同理,不做过多演示

效果图例

  • CSS/JS/VUE分别实现逐字弹出(打字机效果)

代码注释详解

<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>

原文链接:https://juejin.cn/post/7321410935851909157 作者:加油乐

(0)
上一篇 2024年1月8日 下午4:37
下一篇 2024年1月8日 下午4:48

相关推荐

发表评论

登录后才能评论