0

我有一个显示在 LiveView 页面上的项目列表，该列表会根据用户交互而变化。列表中的每一项都通过 Ecto 从数据库中加载，并在 for 循环中呈现在页面上：

<ul>
  <%= for item <- @items do %>
    <li>
    ...
    <a phx-click="remove" phx-value-id={trunc(item.id)}>
  <% end %>
</ul>

每个项目都有一个从列表中删除项目的按钮。liveview中的实现是这样的：

def handle_event("remove", %{"id" => id}, socket) do
  remove_item(id)

  # Push updated list to client
  updated_socket =
    socket
    |> assign(%{items: items()})
    |> put_flash(:info, "Item successfully removed")
  {:noreply, updated_socket}
end

当用户单击删除按钮时，我想要某种淡出 CSS 过渡。如果没有任何自定义 JS，我怎么能做到这一点？

我在用：

  • 凤凰1.6
  • Phoenix LiveView 0.16.0
4

0 回答 0