{"_id":"@activity-maker/animation-box","name":"@activity-maker/animation-box","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@activity-maker/animation-box","version":"0.0.1","description":"## 使用","main":"./dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","prebuild":"rm -rf dist","build":"tsup src/index.tsx --dts --target es5 --format esm,cjs","prepublish":"yarn build","start":"cd examples && yarn dev"},"publishConfig":{"access":"public"},"keywords":[],"author":{"name":"kai.wu"},"license":"ISC","devDependencies":{"@swc/core":"^1.2.224","@types/react":"^18.0.15","@types/styled-components":"^5.1.25","postcss":"^8.4.14","prettier":"2.7.1","styled-components":"^5.3.5","tsup":"^6.1.3","typescript":"^4.7.4"},"dependencies":{},"peerDependencies":{"react":"^17","styled-components":"^5.1.1"},"prettier":{"tabWidth":2,"singleQuote":true},"gitHead":"084047a525a80ea71bbcc6c3656be7b6ab523f08","_id":"@activity-maker/animation-box@0.0.1","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","_npmUser":{"name":"zhangfan999999","email":"356672247@qq.com"},"dist":{"integrity":"sha512-uEc9cr890+jPp0y/AEw2IjAQOJlRqusQjb48MrdM8W4n7CIJMB75/v9rdsh3H0N3A+p3t56heHj1u3zM1Iyy2g==","shasum":"fa086a1257f0f025578731237f908e404fe0222d","tarball":"https://registry.npmjs.org/@activity-maker/animation-box/-/animation-box-0.0.1.tgz","fileCount":5,"unpackedSize":17916,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzouhXIlybbq2zZPdhAC+12rUGAhVDArLYX6kL/RiRfQIgfRCKH0H95hqMqEVvOiV+cgWbMRKLlguQ2GpKlRHO3AA="}]},"directories":{},"maintainers":[{"name":"zhangfan999999","email":"356672247@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-box_0.0.1_1693149832619_0.4968941117748138"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-27T15:23:52.485Z","0.0.1":"2023-08-27T15:23:52.810Z","modified":"2023-08-27T15:23:53.095Z"},"maintainers":[{"name":"zhangfan999999","email":"356672247@qq.com"}],"description":"## 使用","keywords":[],"author":{"name":"kai.wu"},"license":"ISC","readme":"# CSS 动画库 animation-box\n\n## 使用\n\n```jsx\nimport { AnimationBox } from '@activity-maker/animation-box';\n\n<AnimationBox\n  type=\"rotate-center\"\n  delay={0}\n  direction=\"normal\"\n  duration={1}\n  iterationCount={1}\n  loop={false}\n>\n  <div\n    style={{\n      width: 200;\n      height: 200;\n      background: '#ccc';\n    }}\n  ></div>\n</AnimationBox>;\n```\n\n`type` 代表了不同的动画效果，具体的参数可选值及组合效果可见：http://commercial-activity-maker.pages.xmly.work/animation-box\n\n## 实现原理\n\n`animation-box` 内部利用 `styled-components` 对 css 动画进行了包装。CSS 动画来自于 [Animista 网站](https://animista.net/play/basic)。将 css 的 `animation` 各项子属性作为 react 组件的 props 传入，从而可以灵活控制动画。\n\n## 自定义样式\n\n如果库中内置的动画类型不符合需求，可联系开发者添加。或者使用自定义样式 `customStyle`。`customStyle` 接收一个 css 样式字符串，具有最高的优先级，如果和已有的属性冲突，会将其覆盖。\n\n```javascript\n<AnimationBox\n  type=\"rotate-center\"\n  direction=\"normal\"\n  duration={1}\n  iterationCount={1}\n  loop={false}\n  customStyle={`\n  \t@keyframes shadow-drop-center {\n    \t0% {\n      \tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n    \t}\n    \t100% {\n      \tbox-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);\n    \t}\n  \t}\n  \tanimation-name: shadow-drop-center;\n  `}\n>\n```\n\n上面的代码中定义了一个新的 keyframe，然后用 `animation-name` 来指定使用它。或者可以使用简写：`animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;`。**注意**：使用简写形式会覆盖设置的其它属性值。\n\n## 发布流程\n\n- `yarn publish`: 输入要发布的版本号后，构建并发布至 xnpm\n- `git push --follow-tags`: 推送代码及标签\n","readmeFilename":"README.md"}