模糊动画

通过模糊效果平滑地聚焦或模糊元素

模糊动画

模糊（Blur）动画通过对元素应用模糊效果来切换焦点或柔化背景。

使用方法

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

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

选项

interface BlurOptions {
  amount?: number | string; // 模糊强度（默认：10）
  scale?: boolean;          // 添加缩放效果（默认：false）
  fade?: boolean;           // 淡入淡出效果（默认：true）
  spring?: {
    stiffness?: number;     // 弹簧刚度（默认：300）
    damping?: number;       // 阻尼系数（默认：30）
  };
}

使用示例

// 强模糊效果
blur({ amount: 20 })

// 模糊+缩放
blur({ amount: 15, scale: true })

// 仅模糊（无淡入淡出）
blur({ fade: false })

// 使用CSS单位
blur({ amount: '2rem' })