80 行代码实现 Preact-Transition 组件

HowardMolly 发布于12天前

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

查看原文: 80 行代码实现 Preact-Transition 组件

  • heavypeacock
  • silverpanda
  • GeorgeXaviera
  • CoffeyValentine
  • RobTheodore
  • Gard(i)nerMadge
  • Sara(h)Oliver