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

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

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

1 个答案: