npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anov/page-grow

v0.3.3

Published

页面进出场动画管理,零配置,高扩展,是可视化大屏或其他要求炫酷的商业网站必备插件。

Downloads

51

Readme

@anov/page-grow

页面进出场动画管理,零配置,高扩展,是可视化大屏或其他要求炫酷的商业网站必备插件。

Install

npm i @anov/page-grow

Usage

import {pageGrow} from '@anov/page-grow'

option

| 参 数 |说 明 | 类 型 | 默认值 | 是否必填 | | ------------- |---------------|-----|-------|-------| | target | 动画对象 | HTMLElement/string | - | 是 | | type | 动画类型,可选类型参考option.type | number | 2 | 否 | | parseLayer | 解析层数。v0.2.1+支持 | number | 1 | 否 | | interval | 解析层数。v0.2.1+支持 | number | 0.02 | 否 | | adjustTlDur | 是否调整入场动画时长。v0.2.1+支持 | boolean | true | 否 | | config | 配置参数,每种type都有对应的一套默认配置。 详细配置参考option.config | object | {} | 否 |

option.type

|类型 | 含义 | 说明 | |---------------|:---------------|:---------------| | 2 | 向下渐显 |从上到下元素透明度由0到元素初始透明度 | | 3 | 向下展开 |从上到下元素高度由0到元素初始高度| | 4 | 向下放大 |从上到下元素缩放由0到元素初始缩放值| | 5 | 向右渐显 |从左到右元素透明度由0到元素初始透明度 | | 6 | 向右展开 |从左到右元素宽度由0到元素初始宽度 | | 7 | 向右放大 |从左到右元素缩放由0到元素初始缩放值 | | 8 | 向右下渐显 |从左上到右下元素透明度由0到元素初始透明度 | | 9 | 向右下放大 |从左上到右下元素缩放由0到元素初始缩放值 | | 10 | 向右下横向展开 |从左上到右下元素宽度由0到元素初始宽度 | | 11 | 向右下纵向展开 |从左上到右下元素高度由0到元素初始高度 |

option.config

| 参 数 | 说 明 | 类 型 | 默认值 | | ------------- |---------------| -----|-------| | interval | 动画间隔。覆盖option.interval | number | 0.02| | parseLayer | 解析层数。覆盖option.parseLayer | number | 1| | bgType | 背景元素动画效果类型可选值有bgtype中的1、2、3、4 | string | sys_opacity| | stringType| 字符串元素动画效果类型可选值有bgtype中的1、2、3、4、6、7 | string | sys_opacity| | numberType| 数字元素动画效果类型 可选值有bgtype中的1、2、3、4、5 | string| sys_opacity| | imageType | 图片元素动画效果类型 可选值有bgtype中的1、2、3、4 | string | sys_opacity| | svgType | svg元素动画效果类型 可选值有bgtype中的1 | string | sys_opacity| | canvasType | canvas元素动画效果类型可选值有bgtype中的1 | string | sys_opacity| | videoType | video元素动画效果类型可选值有bgtype中的1、2、3、4 | string | sys_opacity| | chartType | 图表元素动画效果类型可选值有bgtype中的1、2、3、4 | string | sys_opacity| | leafNodeType | 叶子元素动画效果类型可选值有bgtype中的1、2、3、4 | string | sys_opacity|

option.config.bgType

| 序号 | 类型 | 说 明 | | ------------- | ------------- |---------------| | 1 | sys_opacity | 元素透明度由0到初始透明度 |
| 2 | sys_scale | 元素缩放由0到初始缩放值 |
| 3 | sys_height | 元素高度由0到初始高度 |
| 4 | sys_width | 元素宽度由0到初始宽度 |
| 5 | sys_number | 数字递增动画 |
| 6 | sys_stringWave | 字符串wave动画 |
| 7 | sys_stringPrint | 字符串打印动画 |

方法

| 名称 | 说明 | 参数 | | ------------- |:---------------|:-----| | init() | 动画初始化 | option | | leave() | 动画退场 | reverseCallback:动画退场完成回调函数timeScale:退场动画速率,默认为2。 |

动画初始化示例,如下所示:

// 初始化参数
let option = {
    target: document.getElementById('container'),
    type: 2,
    config: {
        interval: 0.1,
        parseLayer: 2
    }
}

// 调用初始化方法
pageGrow.init(option) 

动画退场示例,如下所示:

// 退场完成回调函数
function reverseCallback(){console.log('动画退场完成')}

// 调用退场方法
pageGrow.leave(reverseCallback, 1.6)