20行js就能实现逐字显示效果？？？-打字机效果

效果演示

横版

竖版

思路分析

基本结构

HTML基本结构

<div id="container"></div>

这里只需要一个容器，其他的结构通过js动态生成

CSS

#container {
/* 添加这行样式=>文字纵向从右往左显示 */
/* 目前先不设置,后面可以取消注释 */
/* writing-mode: vertical-rl; */

}
#container span {
/* 这里opacity先设置为1，让其不透明，可以看到每一步的效果 */
/* 写完js之后到回来改为0 */
opacity: 1;
transition: opacity 0.5s;

}

文本数据

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

使用数组存放文本数据，一个元素代表一段文字

创建p标签

使用for/of循环遍历数组创建对应个数的p标签，添加到html页面中

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
// 获取dom元素
const container = document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
// 打印每一个item => 数组的每一个元素
console.log(item)
// 创建p标签
const p = document.createElement('p')
// 将p标签插入到container

  container.append(p)

}

item代表数组的每一个元素，也就是每一段文字，所以会创建4个p标签

与数组元素数量对应的p标签就生成好了

接下来就是将每一个元素里面的文本添加到span标签中

创建span标签

为每一个字创建一个span标签，然后让span标签的内容等于对应的字，再将每一个生成的span插入到p标签

本节代码

// 遍历item的每一个字
for (let i = 0; i < item.length; i++) {
// 创建span
let span = document.createElement('span')
// span的内容等于item的每一个字

  span.innerHTML = item[i]
// 将span插入到p标签中

  p.append(span)

}

合并后代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
// 获取dom元素
const container = document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
// 打印每一个item => 数组的每一个元素
console.log(item)
// 创建p标签
const p = document.createElement('p')
// 遍历item的每一个字
for (let i = 0; i < item.length; i++) {
// 创建span
let span = document.createElement('span')
// span的内容等于item的每一个字

    span.innerHTML = item[i]
// 将span插入到p标签中

    p.append(span)

  }
// 将p标签插入到container

  container.append(p)

}

此时已经完成了渲染数组，并将数组的每一个元素的文字渲染到单独的span中

接下来就要让每一个文字做到从看不见到看的见的效果

添加透明度过渡效果

将css样式中的opacity由1改为0

因为每个字的出现时间不一样，所以不能直接在循环的时候直接添加过渡效果，添加以下代码，让span标签在添加到p标签前也添加到新数组中

const arr = []
// 将span也添加到新数组中

arr.push(span)

最后遍历arr数组，为每一个元素添加一个过渡延迟效果

// 延时1毫秒等待上方循环渲染完成
setTimeout(() => {
// 遍历arr数组的每一个元素

  arr.forEach((item, index) => {
// 给每一个元素添加过渡延迟属性

    item.style.transitionDelay = `${index * 0.2}s`
// 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

最后的最后将css样式中的opacity改为0，让所有的字透明

#container span {
opacity: 0;
transition: opacity 0.5s;

}

完整js代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
const arr = []
// 获取dom元素
const container = document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
// 打印每一个item => 数组的每一个元素
console.log(item)
// 创建p标签
const p = document.createElement('p')
// 遍历item的每一个字
for (let i = 0; i < item.length; i++) {
// 创建span
let span = document.createElement('span')
// span的内容等于item的每一个字

    span.innerHTML = item[i]
// 将span插入到p标签中

    p.append(span)
// 将span也添加到新数组中

    arr.push(span)

  }
// 将p标签插入到container

  container.append(p)

}
// 延时1毫秒等待上方循环渲染完成
setTimeout(() => {
// 遍历arr数组的每一个元素

  arr.forEach((item, index) => {
// 给每一个元素添加过渡延迟属性
// 让每一个字都比前一个字延时0.2秒的时间

    item.style.transitionDelay = `${index * 0.2}s`
// 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

至此，已经完成了逐字显示的效果，最后介绍一个css属性

writing-mode

使用这个属性可以改变文字方向，实现纵向从左往右或从右往左显示

以下摘自mdn文档

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

horizontal-tb

对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

vertical-rl

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

vertical-lr

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。