Skip to content
Version: XState v4

Delayed (after) transitions

Delayed transitions are transitions that only happen after a specified interval of time. If another event happens before the end of the timer, the transition doesn’t complete. Delayed transitions are handy if you need to build timeouts and intervals into your application logic.

Delayed transitions are labeled “after” and often referred to as “after” transitions.

Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s a delayed transition from the Stopped state back to the Closed state after 5 seconds.Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s a delayed transition from the Stopped state back to the Closed state after 5 seconds.

View this machine in the Stately Studio.

In a video player, we might want the video to be Closed out of fullscreen mode a few seconds after the video has Stopped, instead of closing the fullscreen mode suddenly as soon as the video is stopped. The eventless transition above transitions from the Stopped state to the Closed state after 5 seconds.

Make an event into a delayed transition​

Delayed transitions have a default time interval of 500ms (0.5 seconds).

On the canvas​

  1. Select the event you want to replace with a delayed transition.
  2. Right-click the event to open the edit menu.
  3. From the Event type options, choose After to turn the event into a delayed transition.

Using the transition Details panel​

  1. Open the transition Details panel from the right tool menu.
  2. From the Event type dropdown menu, choose After to turn the event into a delayed transition.

Specify delay time​

Your delay time interval will be displayed in a human-readable format on hover. For example, 15000ms will be displayed as 15 seconds.

  1. Select the delayed transition.
  2. Open the transition Details panel from the right tool menu.
  3. Use the Delay text input to specify the interval in milliseconds.