淡入淡出动画

通过平滑的淡入/淡出效果为元素添加动画

淡入淡出动画

淡入淡出（Fade）动画通过调整元素的透明度来创建平滑的出现或消失效果。

使用方法

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

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

选项

interface FadeOptions {
  from?: number;        // 起始透明度（默认：0）
  to?: number;          // 结束透明度（默认：1）
  spring?: {
    stiffness?: number; // 弹簧刚度（默认：300）
    damping?: number;   // 阻尼系数（默认：30）
  };
}

使用示例

// 部分淡入淡出
fade({ from: 0.2, to: 0.8 })

// 缓慢淡入淡出
fade({ spring: { stiffness: 100, damping: 20 } })

// 反向淡入淡出
fade({ from: 1, to: 0 })