Elixir 如何在PhoenixLiveView更新视图时启动动画

我有一个简单的liveview，它统计表中的行数并显示。它得到了更新，并且运行得很好。但是我想向用户展示一些动画例如，当数字增加时，数字会快速“闪烁”或模糊。

我尝试了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

defmodule DatabaumWeb.MessageCountLive do
使用Phoenix.LiveView
别名Databaum.API
def渲染（指定）do
~L”“”
到目前为止，我们已收到来自客户设备的信息，其中包含有关其土壤的数据。
"""
结束
def安装（_会话，插槽）是否正常
DatabaumWeb.Endpoint.subscribe（“TTN消息”）
{：好的，把号码（插座）}
结束
def handle_info（e=%{事件：“增加”}，套接字）do
{：noreply，assign（套接字，编号：socket.assigns.number+1）}
结束
defp put_编号（插座）do
分配（套接字，编号：API.获取消息的编号）
结束
结束

---

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

正如Aleksei Matiushkin所说，我必须为其指定一个类。多容易啊：D

---

正如Aleksei Matiushkin所说，我必须给它分配一个类。多容易啊：D

只需在
句柄信息/2
中分配
编号：
的同时分配一个类/css。只需在
句柄信息/2
中分配
编号：
的同时分配一个类/css即可。
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; }
}