# @cleartrip/ct-design-transition

> Transition Component

Latest version **5.28.0** (published 2026-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cleartrip/ct-design-transition
pnpm add @cleartrip/ct-design-transition
yarn add @cleartrip/ct-design-transition
bun add @cleartrip/ct-design-transition
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.28.0 |
| Published | 2026-10-21 |
| First published | 2023-11-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 179.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cleartrip |
| Maintainers | rahulct_com, supragya.chauhan, nareshkapse_ct, saranshdawra, ct_devops, sidhantrajan, hello_world_arya, ritesh.kumarjena, mohitjaincleartrip, ashwin.ct, ashokmpatel, amansaxena1, aakrishtmalik, prateek.oraon, ashwin-ui-ct, shashi-kumar |

## Links

- npm: https://www.npmjs.com/package/@cleartrip/ct-design-transition
- npm.io page: https://npm.io/package/@cleartrip/ct-design-transition

## Dependencies (4)

- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5
- [@cleartrip/ct-design-theme](https://npm.io/package/@cleartrip/ct-design-theme.md) 5.28.0
- [@cleartrip/ct-design-common-utils](https://npm.io/package/@cleartrip/ct-design-common-utils.md) 5.28.0
- [@cleartrip/ct-design-use-merge-refs](https://npm.io/package/@cleartrip/ct-design-use-merge-refs.md) 5.28.0

## Recent versions

- 5.28.0 (latest) — 2026-10-21
- 5.27.0-SNAPSHOT-native-main.16 (SNAPSHOT-native-main) — 2026-10-21
- 5.28.0-SNAPSHOT-holiday-packages-bottomsheet-fix.0 (SNAPSHOT-holiday-packages-bottomsheet-fix) — 2026-10-21
- 5.28.0-SNAPSHOT-inter-2.0 (SNAPSHOT-inter-2) — 2026-10-20
- 5.28.0-SNAPSHOT-impression-fix.0 (SNAPSHOT-impression-fix) — 2026-10-16
- 5.28.0-SNAPSHOT-inter-1.0 (SNAPSHOT-inter-1) — 2026-10-14
- 3.32.0-SNAPSHOT-sme-ct-design-common131026.0 (SNAPSHOT-sme-ct-design-common131026) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-6.0 (SNAPSHOT-figtree-261013-6) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-5.0 (SNAPSHOT-figtree-261013-5) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-4.0 (SNAPSHOT-figtree-261013-4) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-3.0 (SNAPSHOT-figtree-261013-3) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-2.0 (SNAPSHOT-figtree-261013-2) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-1.0 (SNAPSHOT-figtree-261013-1) — 2026-10-13
- 5.27.0-SNAPSHOT-biztrip-snapshot-13oct.0 (SNAPSHOT-biztrip-snapshot-13oct) — 2026-10-13
- 3.32.0-SNAPSHOT-sme-ct-design-common061026.0 (SNAPSHOT-sme-ct-design-common061026) — 2026-10-06
- … 1023 more at https://npm.io/package/@cleartrip/ct-design-transition/versions

## README

# Transition

A component for managing enter/exit transitions.

---

## Installation

```bash
npm install @cleartrip/ct-design-transition
# or
pnpm add @cleartrip/ct-design-transition
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Transition } from '@cleartrip/ct-design-transition';

function Example() {
  return (
    <Transition>
      {/* Basic usage */}
    </Transition>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `duration` | `number | string` | — | No | duration property |
| `easing` | `string` | — | No | easing property |
| `delay` | `number | string` | — | No | delay property |

---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { Transition } from 'yagami/core/components';
+ import { Transition } from '@cleartrip/ct-design-transition';
```

---
_Source: https://npm.io/package/@cleartrip/ct-design-transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._