PyCafe - Solara - Using transitions/animations with solara

app.py
fade.css
requirements.txt
transition.vue

app.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
# check out https://solara.dev/ for documentation
# or https://github.com/widgetti/solara/
# And check out https://py.cafe/maartenbreddels for more examples

# based on https://vuejs.org/guide/built-ins/transition
# and/or https://v2.vuejs.org/v2/guide/transitions
import solara
from pathlib import Path

clicks = solara.reactive(0)


@solara.component_vue("transition.vue")
def Transition(show_first=True, children=[], name="", mode="", duration=200):
    pass  # just a dummy function


@solara.component
def TransitionRotate(axis: str, show_first=True, children=[], duration=1.2):
    uid = solara.use_unique_key()[:6]
    name = f"rotate-{axis}-{uid}"
    duration_ms = duration * 1000
    css_code = f"""
.{name}-enter-active, .{name}-leave-active {{
  transition: all {duration}s ease-out;
  backface-visibility: hidden;
}}

.{name}-enter, .{name}-leave-to  {{
  transform: rotate{axis}(90deg);
}}
.{name}-enter-to, .{name}-leave {{
  transform: rotate{axis}(0deg);
}}
"""
    solara.Style(css_code)
    Transition(show_first=show_first == 0, name=name, duration=duration_ms, children=children, mode="out-in")

@solara.component
def TransitionSlide(axis: str="X", show_first=True, children=[], duration=1.2, translate_enter="50px", translate_leave="-50px"):
    uid = solara.use_unique_key()[:6]
    name = f"slide-{axis}-{uid}"
    duration_ms = duration * 1000
    css_code = f"""
.{name}-enter-active, .{name}-leave-active {{
  transition: all {duration}s ease-out;
}}

.{name}-enter {{
  transform: translate{axis}({translate_enter});
  opacity: 0;
}}

.{name}-leave-to  {{
  transform: translate{axis}({translate_leave});
  opacity: 0;
}}
.{name}-enter-to, .{name}-leave {{
  transform: translate{axis}(0px);
}}
"""
    solara.Style(css_code)
    Transition(show_first=show_first, name=name, duration=duration_ms, children=children, mode="out-in")

@solara.component
def Page():
    print("The component render function gets called")
    # change this code, and see the output refresh
    color = "green"
    if clicks.value >= 5:
        color = "red"

    def increment():
        clicks.value += 1
        print("clicks", clicks)  # noqa

    solara.Button(label=f"Clicked: {clicks}", on_click=increment, color=color)
    solara.Style(Path("fade.css"))
    # why overlap?
    

    with TransitionRotate("X", show_first=(clicks.value % 2) == 0, duration=0.2):
        with solara.Card("Even") as el1:
            solara.Text("This number is even")
        with solara.Card("Odd") as el2:
            solara.Text("This number is even")

    with solara.Card("List"):
        TodoItem("Write", True)
        TodoItem("Read", False)

    RemovableCard()
    RemovableCard()
    solara.v.use_event(el1, "click", lambda *_ignore:  increment())
    solara.v.use_event(el2, "click", lambda *_ignore: increment())
    # solara.Text("this renders below")


@solara.component
def RemovableCard():
    show = solara.use_reactive(True)
    with TransitionSlide("X", show_first=show.value, duration=0.5, translate_leave="100px"):
        with solara.Card("Some report"):
            with solara.Column():
                solara.Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                solara.Markdown("*Close the card to see it animate away*")
            with solara.CardActions():
                solara.v.Spacer()
                solara.Button("Close", on_click=lambda: show.set(False), text=True)
    


@solara.component
def TodoItem(text, default_value):
    done = solara.use_reactive(default_value)
    print("Todo", text, done.value)

    with solara.Row():
        solara.Switch(label=text, value=done)
        solara.v.Spacer()

        with TransitionSlide("X", show_first=done.value, duration=0.2):
            solara.v.Icon(children=["mdi-check"], color="success")

transition.vue

1
2
3
4
5
6
<template>
    <Transition :name="name" :mode="mode" :duration="duration">
        <jupyter-widget v-if="show_first && children.length > 0" :widget="children[0]" key="first-widget"></jupyter-widget>
        <jupyter-widget v-if="!show_first && children.length > 1" :widget="children[1]" key="second-widget"></jupyter-widget>
    </Transition>
</template>

fade.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* name="fade" */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 10.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* name="slide-fade" */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

Py.Cafe

transitions-experiment

Using transitions/animations with solara