旋转动画

使用旋转效果的独特动画

旋转动画

旋转（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 })