transition

Types

Used to define what classes will be applied to your element through each stage of a transition.

pub type Classes {
  Classes(
    enter: #(String, String, String),
    leave: #(String, String, String),
  )
}

Classes(
  enter: #(String, String, String),
  leave: #(String, String, String),
)

</>

pub type State {
  Init
  EnterInit
  Enter
  LeaveInit
  Leave
}

```
Init
```
Starting state.
```
EnterInit
```
First frame of Enter transition.
```
Enter
```
Enter transition from after second frame until the end of transition.
```
LeaveInit
```
First frame of Leave transition.
```
Leave
```
Leave transition from after second frame until the end of transition.

</>

Stores the complete information about a transition, it’s state and all the classes that will be applied.

pub type Transition {
  Transition(state: State, classes: Classes)
}

Transition(state: State, classes: Classes)

</>

pub fn apply(classes: Classes, state: State) -> String

Use the supplied state to select the correct classes to display on the element.

</>

pub fn end(state: Option(State)) -> State

Use the transitionend event to call this, it will update the state back to Init.

</>

pub fn next(state: Option(State)) -> State

Move the state on from Init, e.g. EnterInit -> Enter, LeaveInit -> Leave.

</>

pub fn start(msg: a) -> Effect(a)

Used to trigger the start of an animation. Msg will be dispatched on the next frame.

</>

pub fn state_to_string(state: State) -> String

Convert the state to a string for debugging purposes.

</>

pub fn toggle(state: Option(State)) -> State

Toggle the state from any Leave state to EnterInit, or any Enter state to LeaveInit.