---
url: >-
  https://lit-ui-router.dev/reference/lit-ui-router/controllers/TransitionController.md
---
[lit-ui-router](../index.md) / TransitionController

# Class: TransitionController

Defined in: [packages/lit-ui-router/src/transition-controller.ts:167](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L167)

A zero-dependency Lit
[ReactiveController](https://lit.dev/docs/composition/controllers/)
that keeps its host element synchronized with UI-Router transitions.

The controller registers [TransitionService](https://ui-router.github.io/core/docs/latest/classes/_transition_transitionservice_.transitionservice.html) hooks (by default
`onSuccess`) when the host connects and calls `host.requestUpdate()`
whenever a matching transition event fires — no manual `requestUpdate()`
plumbing, no leaked hooks. All registered hooks are deregistered in
`hostDisconnected()`, so the controller is garbage-collection safe for
elements that come and go from the DOM (including `sticky` routed
components).

On (re)connect the controller also synchronizes once with the router's
current state, so hosts render fresh data even when they connect after
a transition has already completed.

## Examples

**Re-render on every successful transition**

```ts
import { html, LitElement } from 'lit';
import { TransitionController } from 'lit-ui-router';

class NavHeader extends LitElement {
  private transitions = new TransitionController(this);

  render() {
    // Re-evaluated after every successful transition
    return html`Current state: ${this.transitions.current?.name}`;
  }
}
```

**React to parameter changes on a specific state**

```ts
import { LitElement } from 'lit';
import { TransitionController } from 'lit-ui-router';

class UserDetail extends LitElement {
  private transitions = new TransitionController(this, {
    criteria: { to: 'users.detail' },
    callback: () => this.loadUser(this.transitions.params.userId),
  });

  loadUser(userId: string) {
    // fetch and render the user
  }
}
```

**With an explicit router instance**

```ts
import type { ReactiveControllerHost } from 'lit';
import { TransitionController, type UIRouterLit } from 'lit-ui-router';

declare const host: ReactiveControllerHost & HTMLElement;
declare const router: UIRouterLit;

const controller = new TransitionController(host, { router });
```

## Implements

* [`ReactiveController`](https://lit.dev/docs/api/controllers/#ReactiveController)

## Constructors

### Constructor

```ts
new TransitionController(host, options?): TransitionController;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:181](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L181)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `host` | [`ReactiveControllerHost`](https://lit.dev/docs/api/controllers/#ReactiveControllerHost) & `Element` |
| `options?` | [`TransitionControllerOptions`](TransitionControllerOptions.md) |

#### Returns

`TransitionController`

## Accessors

### current

#### Get Signature

```ts
get current(): 
  | StateDeclaration
  | undefined;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:212](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L212)

The current [StateDeclaration](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html) (`globals.current`).

##### Returns

| [`StateDeclaration`](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html)
| `undefined`

***

### globals

#### Get Signature

```ts
get globals(): 
  | UIRouterGlobals
  | undefined;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:202](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L202)

The router's [UIRouterGlobals](https://ui-router.github.io/core/docs/latest/classes/_globals_.uirouterglobals.html), if a router has been discovered.

##### Returns

| [`UIRouterGlobals`](https://ui-router.github.io/core/docs/latest/classes/_globals_.uirouterglobals.html)
| `undefined`

***

### params

#### Get Signature

```ts
get params(): RawParams;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:207](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L207)

The current parameter values (`globals.params`).

##### Returns

[`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html)

***

### router

#### Get Signature

```ts
get router(): 
  | UIRouter
  | undefined;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:197](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L197)

The observed [UIRouter](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) instance.

`undefined` until provided via [TransitionControllerOptions.router](TransitionControllerOptions.md#router) or
discovered from an ancestor \<ui-router> on connect.

##### Returns

| [`UIRouter`](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html)
| `undefined`

***

### transition

#### Get Signature

```ts
get transition(): 
  | Transition
  | undefined;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:220](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L220)

The most recent [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) observed by this controller
(set by observed events and on host connect).

##### Returns

| [`Transition`](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html)
| `undefined`

## Methods

### includes()

```ts
includes(stateOrName, params?): boolean;
```

Defined in: [packages/lit-ui-router/src/transition-controller.ts:230](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/transition-controller.ts#L230)

Delegates to [StateService.includes](https://ui-router.github.io/core/docs/latest/classes/_state_stateservice_.stateservice.html#includes): is the state (or glob pattern,
e.g. `'admin.**'`) included in the current active state?

Returns `false` when no router has been discovered.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateOrName` | [`StateOrName`](https://ui-router.github.io/core/docs/latest/modules/_state_interface_.html#stateorname) |
| `params?` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) |

#### Returns

`boolean`