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