elixir - PhoenixLiveView 更新视图时如何启动动画

Question

我有一个简单的实时视图，它计算表中的行数并显示它。它得到了更新，而且效果很好。但我想向用户展示某种动画。例如，当数字增加时，数字会“闪烁”或快速模糊。

我尝试了 onchange="something"，但这对我不起作用。

这是实时视图代码：

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

知道我该怎么做吗？目前我对动画的细节不感兴趣，只是我如何将更改信息发送到前端。

Answer 1

正如 Aleksei Matiushkin 所说，我必须为它分配一个班级。多么容易：D

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

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

我的动画给有兴趣的人：

.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; }
}

编辑：我需要两个交替的类和动画，因为否则动画只会运行一次。我没有添加它，因为它会不必要地膨胀解决方案。