内容简介：一个使用
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 造轮子锻炼抽象能力
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
- 100行代码实现一个vue分页组件
- React源代码解析（2）：组件的挂载
- React源代码解析（3）：组件的生命周期
- React16.8组件代码复用的4种方式
- vue2.0实现前端星星评分功能组件实例代码
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
