内容简介：一个使用
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实现前端星星评分功能组件实例代码
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
实战Linux编程精髓
罗宾斯 / 中国电力出版社 / 2005-7 / 59.80元
编写应用软件，特别是那些比较重要的软件，毫无疑问要涉及到系统调用。在UNIX/Linux环境下编程更是如此。要想编写优秀的软件，就必须熟悉这些系统调用的方方面面。通过阅读这本书，你能够快速地掌握这些重要技术，以构建严谨的Linux软件。全书主要分为三大部分：第一部分讨论了基本的编程问题，包括Linux编程环境、基本的文件和进程管理与操作、内存操作，还介绍了一些基本的库接口。第二部分比较深入地讨论了......一起来看看 《实战Linux编程精髓》 这本书的介绍吧!
