# @asika32764/vue-animate 中文文档

规范地址：https://npmcn.com/package/%40asika32764/vue-animate/

版本：3\.0\.2
npm 元数据更新时间：2023-10-21T06:28:50.465Z
中文译文更新时间：2026-11-06T23:22:28.782Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40asika32764/vue-animate
原文对照：https://npmcn.com/package/%40asika32764/vue-animate/?lang=original
项目主页：https://github.com/asika32764/vue-animate

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：399 kB，80 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2023-10-02T20:29:56.654Z
- 最新版本发布：2023-10-21T06:28:50.273Z
- 近 30 天下载量：5547（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

[![Version](https://img.shields.io/npm/v/%40asika32764/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/@asika32764/vue-animate) [![License](https://img.shields.io/npm/l/%40asika32764/vue-animate.svg?style=flat-square)](https://npmcn.com/package/%40asika32764/vue-animate/LICENSE)

## 安装

```sh
npm install @asika32764/vue-animate
```

也可以使用：`pnpm add @asika32764/vue-animate`、`yarn add @asika32764/vue-animate`、`bun add @asika32764/vue-animate`

## README

# 动物

[![Version](https://img.shields.io/npm/v/%40asika32764/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/@asika32764/vue-animate) [![License](https://img.shields.io/npm/l/%40asika32764/vue-animate.svg?style=flat-square)](https://npmcn.com/package/%40asika32764/vue-animate/LICENSE)

交叉浏览 CSS3 动画库,是一款动画.cs的端口,用于Vue.js过渡. [德莫尔](https://vue-animate.simular.co/)

支持:

-   阴 2.x
-   变相 3.x
-   阿尔卑斯山.js

## 信贷

-   [@haydenbbbickerton (英语)](https://github.com/haydenbbickerton/vue-animate) 原为 [vue-aniumate (低温)](https://github.com/haydenbbickerton/vue-animate) 作者(仅用于Vue 1.x).
-   [@pavels-hyuna (英语)](https://github.com/pavels-hyuna) 是 v2 SCSS 版本作者.

## 目录

-   [动物](https://npmcn.com/package/%40asika32764/vue-animate/#readme-vue-animate)
    -   [信贷](https://npmcn.com/package/%40asika32764/vue-animate/#readme-credit)
    -   [目录](https://npmcn.com/package/%40asika32764/vue-animate/#readme-table-of-contents)
    -   [安装](https://npmcn.com/package/%40asika32764/vue-animate/#readme-installation)
    -   [过渡](https://npmcn.com/package/%40asika32764/vue-animate/#readme-transitions)
        -   [自定义过渡类](https://npmcn.com/package/%40asika32764/vue-animate/#readme-custom-transition-classes)
        -   [自定义动画属性](https://npmcn.com/package/%40asika32764/vue-animate/#readme-custom-animation-properties)
        -   [幻灯片作为移动](https://npmcn.com/package/%40asika32764/vue-animate/#readme-slide-as-mobile)
    -   [与阿尔平.js合作](https://npmcn.com/package/%40asika32764/vue-animate/#readme-work-with-alpinejs)
    -   [请求注意者](https://npmcn.com/package/%40asika32764/vue-animate/#readme-attentions-seekers)
    -   [选项](https://npmcn.com/package/%40asika32764/vue-animate/#readme-options)
    -   [贡献指南](https://npmcn.com/package/%40asika32764/vue-animate/#readme-contribution-guide)
        -   [构建 Lib](https://npmcn.com/package/%40asika32764/vue-animate/#readme-build-lib)
        -   [构建文档](https://npmcn.com/package/%40asika32764/vue-animate/#readme-build-docs)
        -   [从动画.css同步](https://npmcn.com/package/%40asika32764/vue-animate/#readme-sync-from-animatecss)

## 安装

国家预防机制

```shell
npm i @asika32764/vue-animate --save

yarn add @asika32764/vue-animate
```

光盘N

```html
<link rel="stylesheet" href="https://www.unpkg.com/@asika32764/vue-animate/dist/vue-animate.min.css"/>
```

## 导入

为JS Bundler导入动画.

```ts
import '@asika32764/vue-animate/dist/vue-animate.css';
```

导入 CSS 或 SCSS 文件 .

```css
@import "@asika32764/vue-animate/dist/vue-animate.css";

/* If you want to override CSS variables, write it just after importing */
:root {
  --animate-duration: .3s;
  --animate-delay: 0;
}
```

## 过渡

使用 [Vue.js 过渡](https://vuejs.org/guide/built-ins/transition.html "Vue.js Transitions") 但是对于过渡名称,您会使用其中的一种 [动画](https://animate.style/#utilities "animations") **删除** 页:1 `animate__` 财务报告和审定财务报表 `in/Out` 从名字.

例如,如果想要使用 `animate__animated animate__fadeInLeft` 财务报告和审定财务报表 `animate__fadeInLeft` 你可以写:

```html
<TransitionGroup name="fadeLeft" tag="ul">
    <li v-for="item in items" :key="item.id">
        {{ item }}
    </li>
</TransitionGroup>
```

已写入样式表, 所以只需删除 `In/Out` 从名字,你是黄金.

### 自定义过渡类

Animate.css的原始类名在出入口过渡时得到支持. 所以,如果你要使用 [自定义过渡类](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions "Custom Transition Classes"),可以添加 _\-进入/休假_ 改为各班:

```html
<Transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</Transition>
```

或者使用常规 _内出_ 语法 :

```html
<Transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>
```

### 自定义动画属性

```html
<Transition name="fade">
  <p v-if="show" 
    style="--animate-duration: 0.3s; --animate-delay: 150; --animate-direction: reverse;"
  >hello</p>
</Transition>
```

### 幻灯片作为移动

观点要素必须确定绝对位置.

```
<Transition
    enter-active-class="position-absolute slideInRight"
    leave-active-class="position-absolute slideOutLeft">
    <router-view :key="path"></router-view>
</transition>
```

## 与阿尔平.js合作

阿尔卑斯山 `x-transition` 必须添加 `enter` 财务报告和审定财务报表 `leave` 后缀,必须添加 `In` 财务报告和审定财务报表 `Out` 动画名后的后缀.

```html
<div x-show="open"
    x-transition:enter="fadeIn"
    x-transition:leave="fadeOut"
    style="animation-duration: .3s"
>...</div>
```

另见: [https://github.com/alpinejs/alpine#x-过渡](https://github.com/alpinejs/alpine#x-transition)

## 请求注意者

为了使用"注意",vue-animate.css提供一套JS功能.

```ts
import { bounce } from '@asika32764/vue-animate';
import { ref } from 'vue';

const el = ref<HTMLElement>();

bounce(el.value);
```

-   [德莫尔](https://vue-animate.simular.co/#attentions)
-   [可用的注意请求者](https://github.com/asika32764/vue-animate.css/tree/main/src/attentions)

## 选项

您可以在以下参数中添加动画属性 .

```ts
bounce(el.value, 300); // Durations 300ms
bounce(el.value, '.3s'); // Durations 0.3seconds
bounce(el.value, 300, { delay: 200 }); // Add duration and delay
bounce(el.value, { duration: 300, delay: 200 }); // Add duration and delay by options object
```

| 选项 | 类型 | 说明 |
| --- | --- | --- |
| 会期 | 字符串, 数字 | 可以是任何 CSS 有效的持续时间值 . |
| 延迟 | 字符串, 数字 | 可以是任何 CSS 有效的持续时间值 . |
| 重排数 | 字符串, 数字 | 游戏次数. |
| 方向 | `normal` `reverse` `alternate` `alternate-reverse` | 动画播放方向. |
| 填充模式 | `none` `forwards` `backwards` `both` | 动画填充模式. |

## 贡献指南

克隆人计划并安装道克.

```shell
git clone git@github.com:asika32764/vue-animate.git
cd vue-animate
yarn install
```

运行 :

```shell
yarn dev
```

将启动源文件所在文件站点的 Vite dev 服务器 `src/docs`。 。 。 . 您可以修改此网站以测试您的代码 。 (不要按你测试代码。 )

### 构建 Lib

运行此命令以构建 `/dist` 文档.

```shell
rollup -c
```

### 构建文档

运行此命令以构建 `/docs` 文档.

```shell
yarn build:docs
```

### 从动画.css同步

这个项目是自动转换自动画.css动画, 如果动画.css发布新的动画, 您可以运行此命令以同步动画和自动生成源文件.

```shell
yarn generate
```

## 常见问题

### 如何安装 @asika32764/vue-animate？

在项目目录运行 npm install @asika32764/vue-animate，或使用 pnpm add / yarn add / bun add。

### @asika32764/vue-animate 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @asika32764/vue-animate 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @asika32764/vue-animate 可以商用吗？

@asika32764/vue-animate 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @asika32764/vue-animate 的下载量有多少？

根据 npm 官方下载统计，@asika32764/vue-animate 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,547 次，日均约 185 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @asika32764/vue-animate 还在维护吗？

最新版本 3\.0\.2 发布于 2023/10/21（3 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。