0.0.1 • Published 9 months ago
@activity-maker/animation-box v0.0.1
CSS 动画库 animation-box
使用
import { AnimationBox } from '@activity-maker/animation-box';
<AnimationBox
type="rotate-center"
delay={0}
direction="normal"
duration={1}
iterationCount={1}
loop={false}
>
<div
style={{
width: 200;
height: 200;
background: '#ccc';
}}
></div>
</AnimationBox>;
type
代表了不同的动画效果,具体的参数可选值及组合效果可见:http://commercial-activity-maker.pages.xmly.work/animation-box
实现原理
animation-box
内部利用 styled-components
对 css 动画进行了包装。CSS 动画来自于 Animista 网站。将 css 的 animation
各项子属性作为 react 组件的 props 传入,从而可以灵活控制动画。
自定义样式
如果库中内置的动画类型不符合需求,可联系开发者添加。或者使用自定义样式 customStyle
。customStyle
接收一个 css 样式字符串,具有最高的优先级,如果和已有的属性冲突,会将其覆盖。
<AnimationBox
type="rotate-center"
direction="normal"
duration={1}
iterationCount={1}
loop={false}
customStyle={`
@keyframes shadow-drop-center {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
animation-name: shadow-drop-center;
`}
>
上面的代码中定义了一个新的 keyframe,然后用 animation-name
来指定使用它。或者可以使用简写:animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
。注意:使用简写形式会覆盖设置的其它属性值。
发布流程
yarn publish
: 输入要发布的版本号后,构建并发布至 xnpmgit push --follow-tags
: 推送代码及标签
0.0.1
9 months ago