Add transition modifier

[carson-katri]

Closes #214

This adds the transition modifier and Transition type that decodes to AnyTransition.

transition.mp4

<Picker value-binding="transition">
    <Picker:label>
        <Text>Transition</Text>
    </Picker:label>
    <Picker:content>
        <Text id="opacity" modifiers={~s([{"type": "tag", "value": "opacity"}])}>
            Opacity
        </Text>
        <Text id="slide" modifiers={~s([{"type": "tag", "value": "slide"}])}>
            Slide
        </Text>
        <Text id="move" modifiers={~s([{"type": "tag", "value": "move"}])}>
            Move Bottom
        </Text>
        <Text id="offset" modifiers={~s([{"type": "tag", "value": "offset"}])}>
            Offset 100
        </Text>
        <Text id="scale" modifiers={~s([{"type": "tag", "value": "scale"}])}>
            Scale
        </Text>
        <Text id="push" modifiers={~s([{"type": "tag", "value": "push"}])}>
            Push Right
        </Text>
        <Text id="asymmetric" modifiers={~s([{"type": "tag", "value": "asymmetric"}])}>
            Asymmetric Scale/Opacity
        </Text>
        <Text id="combined" modifiers={~s([{"type": "tag", "value": "combined"}])}>
            Combined Scale Opacity
        </Text>
        <Text id="animation" modifiers={~s([{"type": "tag", "value": "animation"}])}>
            Animation Spring Scale
        </Text>
    </Picker:content>
</Picker>
<VStack modifiers={@native |> animation(animation: :default, value: Integer.to_string(@selection))}>
    <%= for item <- 1..5 do %>
        <Button phx-click="select" phx-value-item={item} id={Integer.to_string(item)}>
            <ZStack modifiers={@native |> frame(height: 44)}>
                <%= if @selection == item do %>
                    <RoundedRectangle
                        id="selection"
                        corner-radius="8"
                        modifiers={
                            @native
                                |> transition(transition: TestBedWeb.IndexLive.make_transition(@transition))
                        }
                    />
                <% end %>
                <Text color={if @selection == item, do: "system-white", else: "system-primary"}>Item #<%= item %></Text>
            </ZStack>
        </Button>
    <% end %>
</VStack>

def make_transition(t) do
  case t do
    "opacity" ->
      :opacity
    "slide" ->
      :slide
    "move" ->
      {:move, [edge: :bottom]}
    "offset" ->
      {:offset, [x: 100, y: 100]}
    "scale" ->
      :scale
    "push" ->
      {:push, [edge: :trailing]}
    "asymmetric" ->
      {:asymmetric, [insertion: :scale, removal: :opacity]}
    "combined" ->
      [:scale, :opacity]
    "animation" ->
      {:scale, :spring}
  end
end