Raxol.Animation.CSSTransitions (Raxol v2.0.1)

CSS-like declarative animation syntax for Raxol components.

This module provides a familiar CSS-style API for defining animations directly on components using a declarative syntax similar to CSS transitions and animations.

Examples

# CSS-like transition syntax
%{
  transition: "opacity 300ms ease-out, transform 500ms ease-in-out"
}

# CSS-like animation syntax  
%{
  animation: "slideIn 1s ease-out forwards"
}

# Keyframe animations
%{
  animation: "bounce 2s infinite",
  keyframes: %{
    "bounce" => %{
      "0%" => %{transform: "translateY(0)"},
      "50%" => %{transform: "translateY(-20px)"},
      "100%" => %{transform: "translateY(0)"}
    }
  }
}

Summary

Functions

apply_transitions(new_style, element_id, previous_style \\ %{})

Applies CSS-like transitions to a component's style changes.

create_keyframe_animation(name, keyframes, options \\ %{})

Creates a keyframe animation from CSS-like keyframe definitions.

parse_animation(animation_string)

Parses CSS animation syntax and creates keyframe animations.

parse_transition(transition_string)

Parses a CSS transition string and creates corresponding animations.

Functions

apply_transitions(new_style, element_id, previous_style \\ %{})

Applies CSS-like transitions to a component's style changes.

Examples

# In a component's render function:
style = %{
  opacity: if state.visible, do: 1.0, else: 0.0,
  transform: "translateY(#{state.offset}px)",
  transition: "opacity 300ms ease-out, transform 500ms ease-in-out"
}

CSSTransitions.apply_transitions(style, element_id, previous_style)

create_keyframe_animation(name, keyframes, options \\ %{})

Creates a keyframe animation from CSS-like keyframe definitions.

Examples

iex> keyframes = %{
...>   "0%" => %{opacity: 0, transform: "translateX(-100px)"},
...>   "50%" => %{opacity: 0.5, transform: "translateX(0px)"},
...>   "100%" => %{opacity: 1, transform: "translateX(0px)"}
...> }
iex> CSSTransitions.create_keyframe_animation(:slide_fade_in, keyframes, %{duration: 1000})

parse_animation(animation_string)

Parses CSS animation syntax and creates keyframe animations.

Examples

iex> CSSTransitions.parse_animation("slideIn 1s ease-out forwards")
%{
  name: :slideIn,
  duration: 1000,
  easing: :ease_out,
  fill_mode: :forwards,
  iteration_count: 1,
  direction: :normal,
  delay: 0
}

parse_transition(transition_string)

Parses a CSS transition string and creates corresponding animations.

Examples

iex> CSSTransitions.parse_transition("opacity 300ms ease-out")
%{
  property: :opacity,
  duration: 300,
  easing: :ease_out,
  delay: 0
}

iex> CSSTransitions.parse_transition("all 500ms ease-in-out 100ms")
%{
  property: :all,
  duration: 500,
  easing: :ease_in_out,
  delay: 100
}