How to have CSS transitions on refreshable elements ?

[astariul]

Question

I'm using refreshable elements to set the opacity of another element in my page.

I'd like to add CSS transitions (for example transition-opacity from Tailwind). I added the class, but it does nothing.

Here is a minimal reproducible code example :

from nicegui import ui


@ui.refreshable
def banner(opacity: bool = False):
    with ui.element("div").classes(f"inline-block opacity-{100 if opacity else 0} transition-opacity w-full"):
        ui.label("Example")


with ui.element("div").on("mouseover", lambda: banner.refresh(True)).on("mouseout", lambda: banner.refresh(False)):
    ui.label("Hover")
banner()

ui.run()

Here is the behavior of this code :

As you can see, there is no transition, even though I added transition-opacity class.

---

As far as I understand, this behavior comes from the fact that refreshable elements are deleted and recreated. So it appears to be impossible to have CSS transitions on refreshable elements, or did I miss something ?

Is there any work-around to have transition on refreshable elements ?

[rodja]

You are right @astariul. The refreshable simply deletes all elements and recreates them. There is no way I'm aware which would make elements inside a refreshable adhere to the transition-opacity class right now. Maybe you could hack the refreshable implementation by first hiding the old elements before deleting and then showing the new ones...

[astariul]

As @rodja pointed out, it's not possible to achieve with a "refreshable".

In my case though, I just needed to modify the style of the elements (the elements themselves stay the same), so a "refreshable" is overkill.

Instead I can just dynamically modify the classes of the elements accordingly :

from nicegui import ui


with ui.element("div") as d1:
    ui.label("Hover")

with ui.element("div").classes(f"inline-block opacity-0 transition-opacity w-full") as d2:
    ui.label("Example")

d1.on("mouseover", lambda: d2.classes("opacity-100", remove="opacity-0")).on("mouseout", lambda: d2.classes("opacity-0", remove="opacity-100"))

ui.run()

This code works appropriately, with the expected CSS transition :

Nicegui is awesome !