open-index/open-npm huggingface dataset:
npm package: @fx1422/semi-animation-vue
Description: motion library for semi-ui-vue
Latest version: 1.0.0

# @fx1422/semi-animation-vue

基于 Semi Design 的 Vue 3 动画组件库。提供了一系列精美的动画效果，可用于过渡、加载、提示等场景。

## 安装

```bash
# 使用 npm
npm install @fx1422/semi-animation-vue

# 使用 yarn
yarn add @fx1422/semi-animation-vue

# 使用 pnpm
pnpm add @fx1422/semi-animation-vue
```

## 使用方法

### 全局注册

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { SemiAnimation } from '@fx1422/semi-animation-vue'

const app = createApp(App)
app.use(SemiAnimation)
app.mount('#app')
```

### 按需引入

```typescript
import { FadeIn, SlideIn } from '@fx1422/semi-animation-vue'
```

### 在组件中使用

```vue
<template>
  <div>
    <!-- 使用全局注册的动画 -->
    <semi-fade-in>
      <div>淡入内容</div>
    </semi-fade-in>

    <!-- 使用按需引入的动画 -->
    <slide-in>
      <div>滑入内容</div>
    </slide-in>
  </div>
</template>

<script setup lang="ts">
import { FadeIn, SlideIn } from '@fx1422/semi-animation-vue'
</script>
```

## 动画属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| duration | number | 300 | 动画持续时间（毫秒） |
| delay | number | 0 | 动画延迟时间（毫秒） |
| easing | string | 'ease' | 动画缓动函数 |
| direction | string | 'normal' | 动画方向 |
| fill | string | 'forwards' | 动画填充模式 |
| iterations | number | 1 | 动画重复次数 |

## 示例

### 基础动画

```vue
<template>
  <div>
    <!-- 淡入动画 -->
    <semi-fade-in>
      <div>淡入内容</div>
    </semi-fade-in>

    <!-- 滑入动画 -->
    <semi-slide-in>
      <div>滑入内容</div>
    </semi-slide-in>

    <!-- 缩放动画 -->
    <semi-scale-in>
      <div>缩放内容</div>
    </semi-scale-in>
  </div>
</template>
```

### 自定义动画参数

```vue
<template>
  <div>
    <semi-fade-in
      :duration="500"
      :delay="200"
      easing="ease-in-out"
      :iterations="2"
    >
      <div>自定义动画参数</div>
    </semi-fade-in>
  </div>
</template>
```

### 组合动画

```vue
<template>
  <div>
    <semi-fade-in>
      <semi-slide-in>
        <div>组合动画效果</div>
      </semi-slide-in>
    </semi-fade-in>
  </div>
</template>
```

## 可用动画

Semi Design 提供了丰富的动画效果，包括但不限于：

- 淡入淡出（FadeIn/FadeOut）
- 滑入滑出（SlideIn/SlideOut）
- 缩放（ScaleIn/ScaleOut）
- 旋转（RotateIn/RotateOut）
- 弹跳（BounceIn/BounceOut）
- 闪烁（Flash）
- 抖动（Shake）
- 脉冲（Pulse）

## 动画场景

### 页面过渡

```vue
<template>
  <div>
    <semi-fade-in>
      <div class="page-content">
        <h1>页面标题</h1>
        <p>页面内容</p>
      </div>
    </semi-fade-in>
  </div>
</template>
```

### 加载状态

```vue
<template>
  <div>
    <semi-pulse v-if="loading">
      <div class="loading-spinner">加载中...</div>
    </semi-pulse>
  </div>
</template>
```

### 提示信息

```vue
<template>
  <div>
    <semi-bounce-in v-if="showMessage">
      <div class="message">操作成功！</div>
    </semi-bounce-in>
  </div>
</template>
```

## 性能优化

1. 使用 `v-if` 而不是 `v-show` 来控制动画组件的显示
2. 避免在动画过程中进行大量 DOM 操作
3. 使用 `will-change` 属性提示浏览器优化动画性能
4. 合理设置动画持续时间和延迟时间

## 版本兼容

- Vue 3.x
- TypeScript 4.x+

## 相关链接

- [Semi Design 官网](https://semi.design/zh-CN)
- [Semi Design GitHub](https://github.com/DouyinFE/semi-design)
- [Vue 3 文档](https://v3.vuejs.org/)

## 许可证

MIT