{"_id":"@anov/page-grow","_rev":"17-915edca4096316c0fbcd025a829e8c45","time":{"created":"2023-08-11T02:35:18.719Z","0.3.1":"2023-08-11T02:07:27.550Z","modified":"2024-06-06T08:23:57.483Z","0.3.2":"2023-08-11T02:27:02.891Z","0.3.3":"2023-08-11T02:35:19.081Z"},"name":"@anov/page-grow","dist-tags":{"latest":"0.3.3"},"versions":{"0.3.3":{"name":"@anov/page-grow","version":"0.3.3","description":"页面进出场动画管理，零配置，高扩展，是可视化大屏或其他要求炫酷的商业网站必备插件。","main":"dist/index.esm.js","type":"module","scripts":{"build":"rollup -c ./build/rollup.config.mjs --watch","start":"npm run dev"},"repository":{"type":"git","url":"https://gitee.com/XWGitLab/page-grow.git"},"keywords":["animation","grow","effects","cool","动画","特效","动画线","加载","进场"],"devDependencies":{"@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@rollup/plugin-typescript":"^11.0.0","chalk":"^5.2.0","concurrently":"^7.6.0","eslint":"^8.30.0","eslint-config-mdcs":"^5.0.0","eslint-plugin-compat":"^4.0.2","eslint-plugin-html":"^7.1.0","eslint-plugin-import":"^2.26.0","rollup":"^3.12.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-filesize":"^9.1.2","rollup-plugin-progress":"^1.1.2","rollup-plugin-visualizer":"^5.9.0","typedoc":"^0.23.24","typescript":"^4.9.4"},"author":{"name":"xingw","email":"18404972905@163.com"},"license":"MIT","bugs":{"url":"https://gitee.com/XWGitLab/page-grow/issues"},"homepage":"https://gitee.com/XWGitLab/page-grow#readme","directories":{"doc":"docs"},"dependencies":{"gsap":"^3.12.1"},"gitHead":"7197aac84e6c854d0a870bae234f76f2f4e44fd1","_id":"@anov/page-grow@0.3.3","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-oI/JUoEj2eRazMYd1iFPen7RTZtNTob4kI/wq6N/BUmv5gi5XHNvz9mJyWG6nc8OnsP5um6IQGc3ogVcQw/vsg==","shasum":"060364a89af05cf9cb51bdaf58c8d91f48f23c19","tarball":"https://registry.npmjs.org/@anov/page-grow/-/page-grow-0.3.3.tgz","fileCount":26,"unpackedSize":1798914,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlYZTf2/Ehh4n+y0aDdXeAPNoNxYCaYnBEhaJ7GKvzawIgTD2L/j7XCjTVmyKLoK7cY0KiCrXedusCFbvIkEn7wzc="}]},"_npmUser":{"name":"xingw","email":"18404972905@163.com"},"maintainers":[{"name":"xhalso","email":"xiaoxuhao.love@gmail.com"},{"name":"zhouzhiguo","email":"zhiguo0508@126.com"},{"name":"zhs0417","email":"867106551@qq.com"},{"name":"zhanghaifeng132","email":"2900156223@qq.com"},{"name":"gongking","email":"517441540@qq.com"},{"name":"zhu18","email":"zhu18@vip.qq.com"},{"name":"rxj_2008","email":"rxj_2008@foxmail.com"},{"name":"god_meng","email":"limengnew@163.com"},{"name":"xingw","email":"18404972905@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/page-grow_0.3.3_1691721318838_0.7406817836867561"},"_hasShrinkwrap":false}},"maintainers":[{"email":"420480179@qq.com","name":"liy612"},{"email":"1076633936@qq.com","name":"dubi_mm"},{"email":"zhangfei_811@163.com","name":"dafeige811"},{"email":"anovteam@163.com","name":"anovcreator"},{"email":"m17600917690@163.com","name":"npmvictory"},{"email":"snippet@aliyun.com","name":"shenliyang"},{"email":"309002203@qq.com","name":"wuyax"},{"email":"xiaoxuhao.love@gmail.com","name":"xhalso"},{"email":"zhiguo0508@126.com","name":"zhouzhiguo"},{"email":"867106551@qq.com","name":"zhs0417"},{"email":"2900156223@qq.com","name":"zhanghaifeng132"},{"email":"517441540@qq.com","name":"gongking"},{"email":"zhu18@vip.qq.com","name":"zhu18"},{"email":"15611346676@163.com","name":"rxj_2008"},{"email":"limengnew@163.com","name":"god_meng"},{"email":"18404972905@163.com","name":"xingw"}],"description":"页面进出场动画管理，零配置，高扩展，是可视化大屏或其他要求炫酷的商业网站必备插件。","homepage":"https://gitee.com/XWGitLab/page-grow#readme","keywords":["animation","grow","effects","cool","动画","特效","动画线","加载","进场"],"repository":{"type":"git","url":"https://gitee.com/XWGitLab/page-grow.git"},"author":{"name":"xingw","email":"18404972905@163.com"},"bugs":{"url":"https://gitee.com/XWGitLab/page-grow/issues"},"license":"MIT","readme":"# @anov/page-grow\r\n页面进出场动画管理，零配置，高扩展，是可视化大屏或其他要求炫酷的商业网站必备插件。\r\n\r\n## Install\r\n\r\n```\r\nnpm i @anov/page-grow\r\n```\r\n## Usage\r\n\r\n```\r\nimport {pageGrow} from '@anov/page-grow'\r\n```\r\n\r\n\r\n### option\r\n| 参 数 |说 明 | 类 型 | 默认值 | 是否必填 |\r\n| ------------- |---------------|-----|-------|-------|\r\n| target | 动画对象 | HTMLElement/string | - | 是 |\r\n| type | 动画类型，可选类型参考[option.type](#optiontype) | number | 2 | 否 |\r\n| parseLayer | 解析层数。v0.2.1+支持 | number | 1 | 否 |\r\n| interval | 解析层数。v0.2.1+支持 | number | 0.02 | 否 |\r\n| adjustTlDur | 是否调整入场动画时长。v0.2.1+支持 | boolean | true | 否 |\r\n| config | 配置参数，每种`type`都有对应的一套默认配置。
详细配置参考[option.config](#optionconfig) | object | {} | 否 |\r\n\r\n#### option.type\r\n|类型 | 含义 | 说明 |\r\n|---------------|:---------------|:---------------|\r\n| 2 | 向下渐显 |从上到下元素`透明度`由0到元素初始透明度 |\r\n| 3 | 向下展开 |从上到下元素`高度`由0到元素初始高度|\r\n| 4 | 向下放大 |从上到下元素`缩放`由0到元素初始缩放值|\r\n| 5 | 向右渐显 |从左到右元素`透明度`由0到元素初始透明度 |\r\n| 6 | 向右展开 |从左到右元素`宽度`由0到元素初始宽度 |\r\n| 7 | 向右放大 |从左到右元素`缩放`由0到元素初始缩放值 |\r\n| 8 | 向右下渐显 |从左上到右下元素`透明度`由0到元素初始透明度 |\r\n| 9 | 向右下放大 |从左上到右下元素`缩放`由0到元素初始缩放值 |\r\n| 10 | 向右下横向展开 |从左上到右下元素`宽度`由0到元素初始宽度 |\r\n| 11 | 向右下纵向展开 |从左上到右下元素`高度`由0到元素初始高度 |\r\n\r\n\r\n#### option.config\r\n| 参 数 | 说 明 | 类 型 | 默认值 |\r\n| ------------- |---------------| -----|-------|\r\n| interval | 动画间隔。覆盖`option.interval` | number | 0.02|\r\n| parseLayer | 解析层数。覆盖`option.parseLayer` | number | 1|\r\n| bgType | 背景元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4 | string | sys_opacity|\r\n| stringType| 字符串元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4、6、7 | string | sys_opacity|\r\n| numberType| 数字元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4、5 | string| sys_opacity|\r\n| imageType | 图片元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4 | string | sys_opacity|\r\n| svgType | svg元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1 | string | sys_opacity|\r\n| canvasType | canvas元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1 | string | sys_opacity|\r\n| videoType | video元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4 | string | sys_opacity|\r\n| chartType | 图表元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4 | string | sys_opacity|\r\n| leafNodeType | 叶子元素动画效果类型
可选值有[bgtype](#optionconfigbgtype)中的1、2、3、4 | string | sys_opacity|\r\n\r\n#### option.config.bgType\r\n| 序号 | 类型 | 说 明 |\r\n| ------------- | ------------- |---------------|\r\n| 1 | sys_opacity | 元素透明度由0到初始透明度 | \r\n| 2 | sys_scale | 元素缩放由0到初始缩放值 | \r\n| 3 | sys_height | 元素高度由0到初始高度 | \r\n| 4 | sys_width | 元素宽度由0到初始宽度 | \r\n| 5 | sys_number | 数字递增动画 | \r\n| 6 | sys_stringWave | 字符串wave动画 | \r\n| 7 | sys_stringPrint | 字符串打印动画 | \r\n\r\n### 方法\r\n| 名称 | 说明 | 参数 |\r\n| ------------- |:---------------|:-----|\r\n| init() | 动画初始化 | [option](#option) |\r\n| leave() | 动画退场 | `reverseCallback`：动画退场完成回调函数
`timeScale`：退场动画速率，默认为2。 |\r\n\r\n\r\n动画初始化示例，如下所示：\r\n```\r\n// 初始化参数\r\nlet option = {\r\n target: document.getElementById('container'),\r\n type: 2,\r\n config: {\r\n interval: 0.1,\r\n parseLayer: 2\r\n }\r\n}\r\n\r\n// 调用初始化方法\r\npageGrow.init(option) \r\n```\r\n\r\n\r\n动画退场示例，如下所示：\r\n```\r\n// 退场完成回调函数\r\nfunction reverseCallback(){console.log('动画退场完成')}\r\n\r\n// 调用退场方法\r\npageGrow.leave(reverseCallback, 1.6)\r\n```\r\n","readmeFilename":"README.md"}