怎么通过贷款网站找做贷款客户,免费手机做网站,安徽工程建设造价信息网站,wordpress 文档主题前端时间在做 年报#xff0c;就不难涉及到 年报 具有的几大特性#xff1a; 1、页面滑动特效 2、文字一行一行出现特效 3、页面内动画 等等
这片文章主要展示一下 文字一行一行出现特效 代码#xff08;react 为例#xff09;
先看效果图#xff1a;
第一步#xff…前端时间在做 年报就不难涉及到 年报 具有的几大特性 1、页面滑动特效 2、文字一行一行出现特效 3、页面内动画 等等
这片文章主要展示一下 文字一行一行出现特效 代码react 为例
先看效果图
第一步分析 想要使 文字一行一行显示出来 无非就三种方式 1、使用css控制底层一个完整页面上层一个只有背景图的完整页面通过动画渐渐向下移动上层div使底层div信息逐渐展示出来以达到渐显的效果但视觉效果较差。 2、使用js控制使用js逐步增加dom节点并给dom节点添加动画效果。对于ReactVue这类框架层面应用不建议直接使用JS控制 DOM 节点增删 3、js css控制初次页面全部渲染出来并给每一行增加 id 属性但Css样式为 opacity: 0 透明渲染完成后通过js改变 css 动画 样式。本文所采用方式
第二部布局 1、想要使文字一行一行展示出来我们期望的是得到渲染数组这样才能对顺序进行控制。不同段落之间我们也期望 从上往下的段落一行一行展示出来所以我们期望得到一个二位数组like this:
funfunction Text(props) {return divprops?.text/div
}
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 AnimationTextcss:
.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)}, [id])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, id, paragraphArrays ])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 key{${index}-${idx}-${id || animationText}} id{${index}-${idx}-${id || animationText}} className{styles.nodeItem} {component}/div))}/div))}/div)
}export default AnimationTextcss:
.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;}
}一个简单的 文字一行一行显示出来 动画组件就实现啦
