80 行代码实现 Preact-Transition 组件

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

内容简介：一个使用

pc-transition

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

接口与CSSTransition类似
大概80行代码
无需设置duration, duration与transition-duration一样
无需繁琐设置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

transition-group
支持animation

License

MIT 造轮子锻炼抽象能力

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

查看所有标签

猜你喜欢:

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

码农书籍

编程之法

July / 人民邮电出版社 / 2015-9-1 / 49.00元

本书涉及面试、算法、机器学习三个主题。书中的每道编程题目都给出了多种思路、多种解法，不断优化、逐层递进。本书第1章至第6章分别阐述字符串、数组、树、查找、动态规划、海量数据处理等相关的编程面试题和算法，第7章介绍机器学习的两个算法—K近邻和SVM。此外，每一章都有“举一反三”和“习题”，以便读者及时运用所学的方法解决相似的问题，且在附录中收录了语言、链表、概率等其他题型。书中的每一道题都是面试的高......一起来看看《编程之法》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器

各进制数互转换器