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

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 造轮子锻炼抽象能力