Transition

In an executing state machine, a transition is the instantaneous transfer from one state to another. In a state machine, a transition tells us what happens when an event occurs.

When an event happens, the currently active state(s) are inspected, looking for an outbound transition that could be triggered by the event. If it is guarded, the guard is checked, and the machine keeps looking for a transition. At last, if a transition is found, it is then executed by exiting the state in question, and entering the state that the transition points to.

A self transition is a transition that goes from and to the same state.

A local transition is a transition that does not exit the source state, but the target state must be a substate of the source state.

An automatic transition is a transition that is not tied to any particular event, but rather tries to fire at all times. Automatic transitions are usually guarded.

A transition can define actions that will be executed whenever that transition is executed.

Notation

A transition is depicted as a curved arrow. The name of the event that triggers the transition is written close by, perhaps on top of the arrow.

The transition always sits between two distinct states

The state that the arrow points from is the state in which the event in question is handled. The state that the arrow points to is the state that the state machine ends up in, if the transition is executed.

A transition can have multiple targets, in case of targetting different regions of a parallel state

Usage

Alongside states, transitions are the main ingredient of state machines and statecharts. A single transition defines how the machine might react to a particular event in case the machine is in a particular state. The combination of the different states and their transition together make up the statechart’s behaviour.

Transitions are primarily used to move the machine between states, possibly executing transition actions if they are defined.

SCXML

In Statechart XML, a transition is a <transition> element nested inside the <state> element to which it applies. The target attribute identifies the state to which it points, while cond is used for the guard.

<state id="somestate">
  <transition event="my_event" target="otherstate" />
</state>
<state id="otherstate" />

Multiple transitions for the same event are defined by defining several transitions for the same event. The transitions are inspected in document order:

<state id="somestate">
  <transition event="my_event" cond="a_guard" target="otherstate" />
  <transition event="my_event" target="thirdstate" />
</state>
<state id="otherstate" />
<state id="thirdstate" />

XState

In XState, a transition is defined using the on property of a state. The key is the event in question, and the value is the name of the target state:

"somestate": {
  "on": {
    "my_event" : "otherstate"
  }
},
"otherstate": {}

It is also possible to define an array of transitions for any given event. Each element in the array defines a transition to be handled by that event, and they are inspected in array order:

"somestate": {
  "on": {
    "my_event" : [
      { "target": "otherstate", "cond": "a_guard" },
      { "target": "thirdstate" }
    ]
  }
},
"otherstate": {},
"thirdstate": {}