1.0.3 • Published 4 years ago

pc-transition v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

pc-transition

https://travis-ci.com/deepkolos/pc-transition npm.io npm.io

一个使用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

demo

Props

参数类型默认值描述
inbooleanfalse是否过渡到entered
appearbooleanfalse刚创建的时候是否有动画
classNamestringclassName
unmountOnExitnumber0.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 造轮子锻炼抽象能力