TypeScript

data-animにはビルトイン型定義が同梱されています。一度インポートするだけで、すべてのdata-anim-*属性の自動補完が有効に。追加設定不要。

セットアップ

import 'data-anim';

これだけです。この1行のインポートでReact（JSX/TSX）とVueテンプレートの型拡張が登録されます。

利用できる機能

すべてのdata-anim-*属性が完全に型付けされ、自動補完が利用可能：

// React / TSX
<div
  data-anim="fadeInUp"             // 30+ animation names
  data-anim-trigger="scroll"       // scroll, load, click, hover
  data-anim-easing="spring"        // ease, ease-out-expo, ease-out-back, spring
  data-anim-stagger-from="center"  // start, end, center, edges
  data-anim-duration="800"
  data-anim-delay="200"
  data-anim-once
/>

エクスポートされた型

カスタムユースケース向けに型を直接インポートできます：

import type {
  DataAnimName,         // "fadeIn" | "fadeInUp" | "bounce" | ...
  DataAnimTrigger,      // "scroll" | "load" | "click" | "hover"
  DataAnimEasing,       // "ease" | "ease-out-expo" | "ease-out-back" | "spring"
  DataAnimStaggerFrom,  // "start" | "end" | "center" | "edges"
  DataAnimDisable,      // "mobile" | "tablet" | "desktop"
  DataAnimAttributes,   // All data-anim-* attributes as an interface
} from 'data-anim';