html、css、js、react、vue 文字一行一行显示出来

前端时间在做年报，就不难涉及到年报具有的几大特性：
1、页面滑动特效
2、文字一行一行出现特效
3、页面内动画
等等

这片文章主要展示一下 文字一行一行出现特效 代码（react 为例）

先看效果图：

第一步：分析
想要使文字一行一行显示出来无非就三种方式
1、使用css控制：底层一个完整页面，上层一个只有背景图的完整页面，通过动画渐渐向下移动上层div，使底层div信息逐渐展示出来，以达到渐显的效果，但视觉效果较差。
2、使用js控制：使用js逐步增加dom节点，并给dom节点添加动画效果。（对于React，Vue这类框架层面应用，不建议直接使用JS控制 DOM 节点增删）
3、js + css控制：初次页面全部渲染出来，并给每一行增加 id 属性，但Css样式为 opacity: 0 透明，渲染完成后，通过js改变 css 动画样式。（本文所采用方式）

第二部：布局
1、想要使文字一行一行展示出来，我们期望的是得到渲染数组，这样才能对顺序进行控制。不同段落之间我们也期望从上往下的段落一行一行展示出来，所以我们期望得到一个二位数组，like this:

paragraphArrays : [[<Text text="第一段第一行" />,<Text text="第一段第二行" />,<Text text="第一段第三行" />,],[<Text text="第二段第一行" />,<Text text="第二段第二行" />,<Text text="第二段第三行" />,],
]

2、不同页面的文本承载container样式可能不同，所以我们期望使用者可自定义样式。
3、不同页面段落之间的样式可能不同，所以我们期望使用者可自定义样式。
4、使用者可自定义行 id

这样，动画组件的 props 我们就定义好了

第三部：实现
1、渲染函数：

js:

import React, { useEffect } from 'react'
import classnames from 'classnames'
import styles from './AnimationText.module.scss'/*** @description: 文字段落一行一行出现动画* @param props:*  paragraphArrays : [[<Text text="第一段第一行" />,<Text text="第一段第二行" />,<Text text="第一段第三行" />,],[<Text text="第二段第一行" />,<Text text="第二段第二行" />,<Text text="第二段第三行" />,],
]
* paragraphClassName: 段落className
* className： container className
* id: container id* @return {*}*/function AnimationText(props) {const { paragraphArrays, paragraphClassName, className, id } = props || {}return (<div className={classnames(styles.container, className)} id={id || 'animationText'} >{(paragraphArrays || []).map((item, index) => (<div className={classnames(styles.paragraph, paragraphClassName)}>{(item || []).map((component, idx) => (<div id={`${index}-${idx}-${id || 'animationText'}`} className={styles.nodeItem} >{component}</div>))}</div>))}</div>)
}export default AnimationText

css:

.paragraph {margin-bottom: 15px;
}.nodeItem {opacity: 0;
}

2、获取 container DOM 节点

// 用于存储 存放动画的 container
let element
// 等同于 componentDidMount
useEffect(() => {element = document.getElementById(id || 'animationText')}, [])

3、获取到DOM节点后, 开始执行动画

css 动画定义：

// 透明度从0 到 1，动画只执行一次
.nodeItemShow {visibility: visible;animation: scan 3s ease 0s 1;
}@keyframes scan {0% {opacity: 0;}100% {opacity: 1;}
}

js:

// 获取到 element 后，循环 paragraphArrays 数组，使用count 计数，每隔 600 * count 毫秒改变当前count 行的 css 样式
useEffect(() => {if (element) {let count = 0for (let i = 0; i < paragraphArrays.length; i += 1) {for (let j = 0; j < paragraphArrays[i].length; j += 1) {count += 1setTimeout(() => {const ele = document.getElementById(`${i}-${j}-${id || 'animationText'}`)ele.setAttribute('class', styles.nodeItemShow)}, 600 * count)}}}
}, [element])

完整代码：

js:

import React, { useEffect } from 'react'
import classnames from 'classnames'
import styles from './AnimationText.module.scss'/*** @description: 文字段落一行一行出现动画* @param props:*  paragraphArrays : [[<Text text="第一段第一行" />,<Text text="第一段第二行" />,<Text text="第一段第三行" />,],[<Text text="第二段第一行" />,<Text text="第二段第二行" />,<Text text="第二段第三行" />,],
]
* paragraphClassName: 段落className
* className： container className
* id: container id* @return {*}*/function AnimationText(props) {const { paragraphArrays, paragraphClassName, className, id } = props || {}let elementuseEffect(() => {element = document.getElementById(id || 'animationText')}, [])useEffect(() => {if (element) {let count = 0for (let i = 0; i < paragraphArrays.length; i += 1) {for (let j = 0; j < paragraphArrays[i].length; j += 1) {count += 1setTimeout(() => {const ele = document.getElementById(`${i}-${j}-${id || 'animationText'}`)ele.setAttribute('class', styles.nodeItemShow)}, 600 * count)}}}}, [element])return (<div className={classnames(styles.container, className)} id={id || 'animationText'} >{(paragraphArrays || []).map((item, index) => (<div className={classnames(styles.paragraph, paragraphClassName)}>{(item || []).map((component, idx) => (<div id={`${index}-${idx}-${id || 'animationText'}`} className={styles.nodeItem} >{component}</div>))}</div>))}</div>)
}export default AnimationText

css:

.container {width: auto;
}.paragraph {margin-bottom: 15px;
}.nodeItem {opacity: 0;
}.nodeItemShow {visibility: visible;animation: scan 3s ease 0s 1;
}@keyframes scan {0% {opacity: 0;}100% {opacity: 1;}
}

一个简单的文字一行一行显示出来动画组件就实现啦

html、css、js、react、vue 文字一行一行显示出来相关推荐

html字体闪烁模板,CSS+JS阴影闪烁文字
阴影闪烁文字 .F1 {filter: glow(Color=#FF8000,Strength=10); width=150px; height=200px; } .F2 {filter: glow( ...
HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️
js超过的文字用省略号显示
省略多余字符,用...显示. js方法: export function ellipsis(value, len) { if (!value) return '' if (value.length & ...
一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...

html、css、js、react、vue 文字一行一行显示出来

html、css、js、react、vue 文字一行一行显示出来相关推荐

最新文章

热门文章