内容简介:一个使用
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实现前端星星评分功能组件实例代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
代码大全(第2版)
[美] 史蒂夫·迈克康奈尔 / 金戈、汤凌、陈硕、张菲 译、裘宗燕 审校 / 电子工业出版社 / 2006-3 / 128.00元
第2版的《代码大全》是著名IT畅销书作者史蒂夫·迈克康奈尔11年前的经典著作的全新演绎:第2版不是第一版的简单修订增补,而是完全进行了重写;增加了很多与时俱进的内容。这也是一本完整的软件构建手册,涵盖了软件构建过程中的所有细节。它从软件质量和编程思想等方面论述了软件构建的各个问题,并详细论述了紧跟潮流的新技术、高屋建瓴的观点、通用的概念,还含有丰富而典型的程序示例。这本书中所论述的技术不仅填补了初......一起来看看 《代码大全(第2版)》 这本书的介绍吧!