内容简介:一个使用
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实现前端星星评分功能组件实例代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python网络编程(第3版)
[美] Brandon Rhodes、[美] John Goerzen / 诸豪文 / 人民邮电出版社 / 2016-9 / 79.00元
本书针对想要深入理解使用Python来解决网络相关问题或是构建网络应用程序的技术人员,结合实例讲解了网络协议、网络数据及错误、电子邮件、服务器架构和HTTP及Web应用程序等经典话题。具体内容包括:全面介绍Python3中最新提供的SSL支持,异步I/O循环的编写,用Flask框架在Python代码中配置URL,跨站脚本以及跨站请求伪造攻击网站的原理及保护方法,等等。一起来看看 《Python网络编程(第3版)》 这本书的介绍吧!
SHA 加密
SHA 加密工具
XML、JSON 在线转换
在线XML、JSON转换工具