前端時(shí)間在做 年報(bào)，就不難涉及到 年報(bào) 具有的幾大特性：
1、頁(yè)面滑動(dòng)特效
2、文字一行一行出現(xiàn)特效
3、頁(yè)面內(nèi)動(dòng)畫
等等

這片文章主要展示一下 文字一行一行出現(xiàn)特效 代碼（react 為例）

先看效果圖：

第一步：分析
想要使 文字一行一行顯示出來(lái) 無(wú)非就三種方式
1、使用css控制：底層一個(gè)完整頁(yè)面，上層一個(gè)只有背景圖的完整頁(yè)面，通過動(dòng)畫漸漸向下移動(dòng)上層div，使底層div信息逐漸展示出來(lái)，以達(dá)到漸顯的效果，但視覺效果較差。
2、使用js控制：使用js逐步增加dom節(jié)點(diǎn)，并給dom節(jié)點(diǎn)添加動(dòng)畫效果。（對(duì)于React，Vue這類框架層面應(yīng)用，不建議直接使用JS控制 DOM 節(jié)點(diǎn)增刪）
3、js + css控制：初次頁(yè)面全部渲染出來(lái)，并給每一行增加 id 屬性，但Css樣式為 opacity: 0 透明，渲染完成后，通過js改變 css 動(dòng)畫 樣式。（本文所采用方式）

第二部：布局
1、想要使文字一行一行展示出來(lái)，我們期望的是得到渲染數(shù)組，這樣才能對(duì)順序進(jìn)行控制。不同段落之間我們也期望 從上往下的段落一行一行展示出來(lái)，所以我們期望得到一個(gè)二位數(shù)組，like this:

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

2、不同頁(yè)面的文本承載container樣式可能不同，所以我們期望使用者可自定義樣式。
3、不同頁(yè)面段落之間的樣式可能不同，所以我們期望使用者可自定義樣式。
4、使用者可自定義行 id

這樣，動(dòng)畫組件的 props 我們就定義好了

第三部：實(shí)現(xiàn)
1、渲染函數(shù)：

js:

import React, { useEffect } from 'react' import classnames from 'classnames' import styles from './AnimationText.module.scss'/*** @description: 文字段落一行一行出現(xiàn)動(dòng)畫* @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 節(jié)點(diǎn)

// 用于存儲(chǔ) 存放動(dòng)畫的 container let element // 等同于 componentDidMount useEffect(() => {element = document.getElementById(id || 'animationText')}, [])

3、獲取到DOM節(jié)點(diǎn)后, 開始執(zhí)行動(dòng)畫

css 動(dòng)畫定義：

// 透明度從0 到 1，動(dòng)畫只執(zhí)行一次 .nodeItemShow {visibility: visible;animation: scan 3s ease 0s 1; }@keyframes scan {0% {opacity: 0;}100% {opacity: 1;} }

js:

// 獲取到 element 后，循環(huán) paragraphArrays 數(shù)組，使用count 計(jì)數(shù)，每隔 600 * count 毫秒改變當(dāng)前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: 文字段落一行一行出現(xiàn)動(dòng)畫* @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;} }

一個(gè)簡(jiǎn)單的 文字一行一行顯示出來(lái) 動(dòng)畫組件就實(shí)現(xiàn)啦

總結(jié)

以上是生活随笔為你收集整理的html、css、js、react、vue 文字一行一行显示出来的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。