1.0.3 • Published 6 years ago
pc-transition v1.0.3
pc-transition
一个使用hooks编写的transition组件, 主要是之前使用的preact-transition-group里的CSSTransition组件, 偶现入场动画不触发的情况, 故使用hooks实现了一个
- 接口与CSSTransition类似
- 大概80行代码
- 无需设置duration, duration与transition-duration一样
- 无需繁琐设置classNames传递一个className即可, css里配合data-state来命中状态
Live Demo
Props
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| in | boolean | false | 是否过渡到entered |
| appear | boolean | false | 刚创建的时候是否有动画 |
| className | string | className | |
| unmountOnExit | number | 0.13 | 滑动到下一页阈值 |
Events
| 事件名 | 参数 | 描述 |
|---|---|---|
| onEnter | 进入前, 相当于vue的enter | |
| onEntering | 进入中, 相当于vue的enterActive | |
| onEntered | 进入后, 相当于vue的enterTo | |
| onExit | 离开前, 相当于vue的leave | |
| onExiting | 离开中, 相当于vue的leaveActive | |
| onExited | 离开后, 相当于vue的leaveTo |
Demo Code
function Page() {
return <div>
<Transition>
<div>transition</div>
</Transition>
</div>
}TODO
- transition-group
- 支持animation
License
MIT 造轮子锻炼抽象能力