80 行代碼實現 Preact-Transition 組件

語言: CN / TW / HK

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 造輪子鍛鍊抽象能力