0

I have a simple liveview that counts the number of rows in a table and displays that. It gets updated and that works quite well. But I want to show some kind of animation to the user. For example the number "flashes" or blurs quickly whenever it's increased.

I tried onchange="something", but that did not work for me.

Here's the live view code:

defmodule DatabaumWeb.MessageCountLive do
  use Phoenix.LiveView
  alias Databaum.API

  def render(assigns) do
    ~L"""
    <h2 class="title is-4">To date we have received <%= @number %> messages from our client's devices with data about their soil.</h2>
    """
  end

  def mount(_session, socket) do
    DatabaumWeb.Endpoint.subscribe("TtnMessages")
    {:ok, put_number(socket)}
  end

  def handle_info(e = %{event: "increase"}, socket) do
    {:noreply, assign(socket, number: socket.assigns.number + 1)}
  end

  defp put_number(socket) do
    assign(socket, number: API.get_number_of_messages)
  end
end

Any idea how I can do that? I'm not interested in the details of the animation at the moment, just how I can get the change information to the frontend.

Joe Eifert
  • 1,306
  • 14
  • 29

1 Answers1

3

As Aleksei Matiushkin said, I have to assign a class to it. How easy :D

<span class="<%= @class %>

def handle_info(%{event: "increase"}, socket) do
 {:noreply, assign(socket, number: socket.assigns.number + 1, class: "flashit")}
end

My animation for anyone who's interested:

.flashit{
  -webkit-animation: flash linear 1s;
  animation: flash linear 1s;
}
@-webkit-keyframes flash {
  0% { opacity: 1; }
  50% { opacity: .1; }
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: .1; }
  100% { opacity: 1; }
}

EDIT: I needed two alternating classes and animations because the animation would run just once otherwise. I'm not adding that because it would unnecessarily bloat up the solution.

Joe Eifert
  • 1,306
  • 14
  • 29