80 行代码实现 Preact-Transition 组件

栏目: IT技术 · 发布时间: 4年前

内容简介:一个使用

pc-transition

一个使用 hooks 编写的transition组件, 主要是之前使用的 preact-transition-group 里的 CSSTransition 组件, 偶现入场动画不触发的情况, 故使用hooks实现了一个

  1. 接口与CSSTransition类似
  2. 大概80行代码
  3. 无需设置duration, duration与transition-duration一样
  4. 无需繁琐设置classNames传递一个className即可, css里配合data-state来命中状态

Live Demo

Link

80 行代码实现 Preact-Transition 组件

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

  1. transition-group
  2. 支持animation

License

MIT 造轮子锻炼抽象能力


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码大全(第2版)

代码大全(第2版)

[美] 史蒂夫·迈克康奈尔 / 金戈、汤凌、陈硕、张菲 译、裘宗燕 审校 / 电子工业出版社 / 2006-3 / 128.00元

第2版的《代码大全》是著名IT畅销书作者史蒂夫·迈克康奈尔11年前的经典著作的全新演绎:第2版不是第一版的简单修订增补,而是完全进行了重写;增加了很多与时俱进的内容。这也是一本完整的软件构建手册,涵盖了软件构建过程中的所有细节。它从软件质量和编程思想等方面论述了软件构建的各个问题,并详细论述了紧跟潮流的新技术、高屋建瓴的观点、通用的概念,还含有丰富而典型的程序示例。这本书中所论述的技术不仅填补了初......一起来看看 《代码大全(第2版)》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换