daisyUIのアニメーションを無効化する

小ネタ。

daisyUIのアニメーションの無効化ができないか調べたのでメモ。

問題

daisyUIのコンポーネントを使うと、インタラクションの一環としてか、デフォルトでアニメーションが行われる。

ちょっと困ったのが、チェックボックスをReactコンポーネント化して使う際、プロパティとして checked を渡してあらかじめチェック済みにしても、チェックのアニメーションが流れてしまう。

下記デモページで Preview と HTML や JSX のタブを切り替えると確認できる。

daisyui.com

対応

アニメーションを抑制できないかと調べてみると、以下のissueを発見。

github.com

クラス名として no-animation を付与すると、個別にアニメーションを抑制できる。

ボタンのサンプルとしてButton without click animationにも使用されていた。

チェックボックスに付与すると、アニメーションせずにチェックされた状態で表示されるようになった。

clsx でクラス名を組み立てているので、 className={clsx(..., checked && 'no-animation')} や className={clsx(..., { 'no-animation': checked })} のように指定することで、チェック済みならアニメーション無効化、といった制御ができた。

アニメーションを一括で無効化

tailwind.config.js にて、--animation-btn や --animation-input をテーマから指定することで、アニメーションの持続時間を変更できる。

issueに記載があったが、この持続時間を0にすることで、アニメーションを一括で無効化できる模様。

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        mytheme: {
          ...
          '--animation-input': 0,
        },
      },
    ],
  },
}

振り返り

こういった設定がサクッとできる、いい時代になったなぁ...