# @captaincodeman/transition 中文文档

规范地址：https://npmcn.com/package/%40captaincodeman/transition/

版本：1\.0\.2
npm 元数据更新时间：2022-04-04T21:46:56.615Z
中文译文更新时间：2026-11-09T05:29:18.683Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40captaincodeman/transition
原文对照：https://npmcn.com/package/%40captaincodeman/transition/?lang=original
项目主页：https://github.com/CaptainCodeman/x-transition#readme
源码仓库：https://github.com/CaptainCodeman/x-transition

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

- 包体积（解压后）：8.5 kB，3 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2020-10-08T18:25:32.843Z
- 最新版本发布：2020-10-22T20:24:50.512Z
- 近 30 天下载量：6875（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

CSS 类过渡

## 安装

```sh
npm install @captaincodeman/transition
```

也可以使用：`pnpm add @captaincodeman/transition`、`yarn add @captaincodeman/transition`、`bun add @captaincodeman/transition`

## README

# x- 过渡

通过交换 CSS 类来添加动画过渡效果的Web 组件 。 如果您想使用 Tailwind CSS / Tailwind UI 来获取一些东西, 则有用 _其他项目_ 比起Alpine.js,Vue或React(例如:lit-element / lit-html或Vanilla JavaScript).

自动处理嵌入式过渡,所以在孩子过渡完成之前,父母是不会隐藏的.

702字节 Brotli,877字节 Gzipepped, 2.28 KB Minified.

[演示](https://x-transition.web.app/)

## 使用量

将元素包到过渡中 `<x-transition>` 设置 `open` 属性或 `.open` 属性来控制可见度。 使用属性定义要应用的类别 :

-   `enter` 当元素显示时应用( 切入过渡)
-   `enter-from` 在输入过渡开始时应用
-   `enter-to` 在输入过渡结束时应用
-   `leave` 当元素被隐藏时应用( 离开过渡)
-   `leave-from` 在休假过渡开始时适用
-   `leave-to` 在休假过渡结束时适用

输入后, 元素 `style.display` 财产被清除. 休假后,要件 `style.display` 属性设定为 `none`。 。 。 .

如果出入口过渡对称,可以使用更紧凑的定义:

-   `with` 将应用相同的值到 `enter` 财务报告和审定财务报表 `leave`。 。 。 .
-   `show` 将应用相同的值到 `enter-to` 财务报告和审定财务报表 `leave-from` (即显示状态).
-   `hide` 将应用相同的值到 `enter-from` 财务报告和审定财务报表 `leave-to` (即藏国也.

### CDN/静态 HTML/香草 JS

在页面上添加脚本 :

```html
<script src="https://unpkg.com/@captaincodeman/transition?module" type="module"></script>
```

环绕要转换的元素 `<x-transition>` 使用 Tailwind CSS 建议的类:

```html
<!--
  Off-canvas menu overlay, show/hide based on off-canvas menu state.

  Entering: "transition-opacity ease-linear duration-300"
    From: "opacity-0"
    To: "opacity-100"
  Leaving: "transition-opacity ease-linear duration-300"
    From: "opacity-100"
    To: "opacity-0"
-->
<x-transition
    id="overlay"
    enter="transition-opacity ease-linear duration-300"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity ease-linear duration-300"
    leave-from="opacity-100"
    leave-to="opacity-0">
  <div class="fixed inset-0">
    <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
  </div>
</x-transition>
```

或者,采用缩短的表格:

```html
<x-transition 
    id="overlay"
    with="transition-opacity ease-linear duration-300"
    hide="opacity-0"
    show="opacity-100">
    &hellip;
</x-transition>
```

通过添加一个 `open` 属性 `<x-transition>` 元素或设置 `.open` 属性改为真实.

```js
function showMenu() {
  overlay.open = true
}
```

### 编译脚本

使用 `npm`数字 :

```
npm install --save @captaincodeman/transition
```

导入到应用程序 :

```ts
import '@captaincodeman/transition'
```

使用 Tailwind CSS 的模板中包含基于所使用的应用诱导系统的分类设置显示(例如:

```html
<!--
  Profile dropdown panel, show/hide based on dropdown state.

  Entering: "transition ease-out duration-200"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
-->
<x-transition
    enter="transition ease-out duration-200"
    enter-from="transform opacity-0 scale-95"
    enter-to="transform opacity-100 scale-100"
    leave="transition ease-in duration-75"
    leave-from="transform opacity-100 scale-100"
    leave-to="transform opacity-0 scale-95"
  >
  <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
    &hellip;
  </div>
</x-transition>
```

### 组合密钥

在一些同样使用过渡的母体中,有可能会封闭出一组单独的过渡. 为了避免他们全部反应/等待错误的东西,使用一个 `key` 属性来组合它们.

例如,所有与移动菜单相关的过渡可能都 `key="mobile-menu"` 这会让他们忽略其他过渡中的事件,反之亦然.

### 开始

使用 [尾风示例代码](https://blog.tailwindcss.com/utility-friendly-transitions-with-tailwindui-react)

## 常见问题

### @captaincodeman/transition 是什么？

CSS 类过渡

### 如何安装 @captaincodeman/transition？

在项目目录运行 npm install @captaincodeman/transition，或使用 pnpm add / yarn add / bun add。

### @captaincodeman/transition 支持 TypeScript 吗？

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

### @captaincodeman/transition 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @captaincodeman/transition 可以商用吗？

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

### @captaincodeman/transition 的下载量有多少？

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

### @captaincodeman/transition 还在维护吗？

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