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),
  )
}

Constructors

  • Classes(
      enter: #(String, String, String),
      leave: #(String, String, String),
    )
pub type State {
  Init
  EnterInit
  Enter
  LeaveInit
  Leave
}

Constructors

  • 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)
}

Constructors

  • Transition(state: State, classes: Classes)

Functions

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.

Search Document