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