How to animate a Modal Screen

[ghost]

Hello,

I'm trying to fade in a modal screen once it is pushed.
I've made a minimal example:

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.screen import ModalScreen
from textual.widgets import Button, Input


class LoginScreen(ModalScreen):
    def compose(self) -> ComposeResult:
        yield Grid(
            Input(placeholder="Username", id="user"),
            Input(placeholder="Password", id="password", password=True),
            Button("Login", id="login", variant="primary"),
            Button("Logout", id="logout", variant="error"),
            id="login_dialog",
        )

    def on_mount(self):
        self.styles.animate("opacity", value=0.0, duration=5.0)


class TestApp(App):
    CSS_PATH = "test.css"

    def on_mount(self):
        self.push_screen(LoginScreen())


app = TestApp()

if __name__ == "__main__":
    app.run()

And here is the CSS:

Screen {
    background: $panel;
}


LoginScreen {
    align: center middle;
    background: $primary 30%;
}


Input {
    margin: 1 1;
}

Button {
    margin: 1 2;
}

#login_dialog {
    width: 50;
    height: 20;
    grid-size: 2;
    padding: 0 1;
    border: thick $background 80%;
    background: $surface;
}

#user, #password {
    column-span: 2;
}

I've tested the result in PowerShell.
There are some problems with this attempt:

• After the animation is completed, there are two LoginScreens on the TUI (one in the proper position, one on the left hand side)
• When running the PowerShell inside PyCharm, a block randomly runs around the screen during the animation
• Instead of fading the LoginScreen, the background is faded

Is something wrong with my attempt, or is animating Screens not supported?

[TomJGooding]

I've not yet managed to get to the bottom of all the strange behaviour in your app - but it looks like animation does work for modal screens using a basic example:

from textual.app import App
from textual.screen import ModalScreen


class FadeInRed(ModalScreen):
    DEFAULT_CSS = """
    FadeInRed {
        opacity: 0%;
        background: red;
    }
    """

    def on_mount(self) -> None:
        self.styles.animate("opacity", value=1.0, duration=2.0)


class TestApp(App):
    def on_mount(self) -> None:
        self.push_screen(FadeInRed())


if __name__ == "__main__":
    app = TestApp()
    app.run()

This line in your example self.styles.animate("opacity", value=0.0, duration=5.0) I think actually fades out the screen, which I'm not sure is your intention?

[TomJGooding]

Definitely some strange behaviour once you try adding any widgets to the screen though!

from textual.app import App, ComposeResult
from textual.screen import ModalScreen
from textual.widgets import Static


class FadeInWidget(Static):
    DEFAULT_CSS = """
    FadeInWidget {
        width: auto;
        opacity: 0%;
        background: purple;
    }
    """

    def on_mount(self) -> None:
        self.styles.animate("opacity", value=1.0, duration=2.0)


class FadeInScreen(ModalScreen):
    DEFAULT_CSS = """
    FadeInScreen {
        align: center middle;
        opacity: 0%;
        background: red;
    }

    FadeInScreen #builtin {
        opacity: 0%;
        width: auto;
        background: green;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("Builtin widget composed in screen", id="builtin")
        yield FadeInWidget("Custom widget with animation on mount")

    def on_mount(self) -> None:
        widget = self.query_one("#builtin", Static)
        widget.styles.animate("opacity", value=1.0, duration=2.0)


class TestApp(App):
    def on_mount(self) -> None:
        self.push_screen(FadeInScreen())


if __name__ == "__main__":
    app = TestApp()
    app.run()

[raayu83]

Thanks for confirming this!
Wonder if there is a way to fix it...

[TomJGooding]

Raised as a possible bug in #2616

[willmcgugan]

I think there is an issue with setting opacity to 0% on screens.

@xyxz-web You probably want to set the background color to transparent. Try animating "background" to "transparent".

Bear in mind that the terminal can't do true transparency. It is limited to blending foreground and background colors.

[ghost]

@willmcgugan:
So I should replace self.styles.animate("opacity", value=0.0, duration=5.0) with self.styles.animate("background", value="transparent", duration=5.0)?

This still doesn't fade in / fade out the modal dialog though.