auto-animate

仓库创建 2025年11月8日最近提交 29 天前SkillHot 收录 22 天前

▸ 精选理由

体积小且开箱即用，适合需简单动画且避免复杂库的项目

这个 Skill 做什么

为 React 提供零配置的轻量列表与过渡动画方案

给 React 提供零配置的动画方案，主要用在列表过渡、手风琴、toast 等需要平滑动效的场景。只需少量代码就能自动处理元素增删改的过渡，遇到 SSR 问题或想避开复杂动画库时特别好用。优点是体积超小、无外部依赖且兼容多框架，用起来非常轻量。

▸ 展开 SKILL.md 英文原文

AutoAnimate (@formkit/auto-animate) zero-config animations for React. Use for list transitions, accordions, toasts, or encountering SSR errors, animation libraries complexity.

开发编程React动画轻量通用

180

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/secondsky/claude-skills/main/plugins/auto-animate/skills/auto-animate/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/secondsky/claude-skills/main/plugins/auto-animate/skills/auto-animate/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# AutoAnimate

**Status**: Production Ready ✅
**Last Updated**: 2025-11-07
**Dependencies**: None (works with any React setup)
**Latest Versions**: @formkit/auto-animate@0.9.0

---

## Quick Start (2 Minutes)

### 1. Install AutoAnimate

```bash
bun add @formkit/auto-animate
```

**Why this matters:**
- Only 3.28 KB gzipped (vs 22 KB for Motion)
- Zero dependencies
- Framework-agnostic (React, Vue, Svelte, vanilla JS)

### 2. Add to Your Component

```tsx
import { useAutoAnimate } from "@formkit/auto-animate/react";

export function MyList() {
  const [parent] = useAutoAnimate(); // 1. Get ref

  return (
    <ul ref={parent}> {/* 2. Attach to parent */}
      {items.map(item => (
        <l

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有