回転アニメーション

回転効果を使ったユニークなアニメーション

回転アニメーション

回転（Rotate）アニメーションは、要素を回転させながら表示・非表示にする効果を作ります。

使い方

import { transition } from '@ssgoi/react';
import { rotate } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...rotate()
    })}>
      Rotate me!
    </div>
  );
}

オプション

interface RotateOptions {
  degrees?: number;     // 回転角度（デフォルト：180）
  opacity?: boolean;    // 透明度効果の有無（デフォルト：true）
  scale?: boolean;      // スケール効果の有無（デフォルト：true）
  spring?: {
    stiffness?: number; // スプリング強度（デフォルト：300）
    damping?: number;   // 減衰係数（デフォルト：30）
  };
}

使用例

// 完全回転
rotate({ degrees: 360 })

// 回転のみ（透明度・スケール変化なし）
rotate({ opacity: false, scale: false })

// 小さい回転
rotate({ degrees: 90 })

// 逆方向回転
rotate({ degrees: -180 })