Sebb
CSS animation when adding new elements to the DOM
When LV change-detection results in new elements rendered, what is the recommended way to do that?
Is this OK? (works, but not sure if right way to do it)
defmodule TestlvtransitionsWeb.MyLive do
use TestlvtransitionsWeb, :live_view
def render(assigns) do
~H"""
<style>
@keyframes fadein {
from { opacity: 0.2; }
to { opacity: 1; }
}
.new-box { animation: fadein 1000ms linear; }
</style>
<div phx-click="show1">SHOW 1</div>
<div phx-click="show2">SHOW 2</div>
<div :if={@show1} class="bg-red-500 fadein">HELLO</div>
<div :if={@show2} class="bg-red-500 fadein">HELLO</div>
"""
end
def mount(_, _, socket), do: {:ok, assign(socket, show1: false, show2: false)}
def handle_event("show1", _, socket), do: {:noreply, assign(socket, :show1, true)}
def handle_event("show2", _, socket), do: {:noreply, assign(socket, :show2, true)}
end
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #performance
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Bringing learning, work and compliance together since 1987.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Marked As Solved
paulstatezny
This code snippet by Sebb using
phx-mountedandJS.transitionshould work. It currently doesn’t because of a bug inphoenix_live_view.js, for which I’ve submitted a bug report.If that gets patched, it’s probably the simplest solution given a LiveView/Tailwind tech stack.
Also Liked
trisolaran
yep forget what I said, I just looked and I’m actually using
phx-mounted+JS.showas well.. I’m having a strong déjà vu feeling of having gone through all this alreadyHere’s what works for me:
Basically, exactly like your solution. I guess thre’s something broken with
phx-mounted={JS.transistion(...)}after all.kwando
I cant wrap my head around how to reliable use JS hooks to animate. There are some unintuitive things happening when animating stuffs and mixing JS hooks with server rendering
problem is probably on my end, but still
paulstatezny
Unless I’m mistaken, transitions with
JSfunctions are altogether broken except when usingJS.showand maybeJS.hide.By “broken”, I mean to say that the start and end classes are not applied at the correct times.
I could be wrong, but I’ve spent hours trying many different things to make it work without success.