[ENHANCEMENT] ability to apply animation to grid size transitions

[epi052]

Please give a brief but clear explanation of what the issue is. Let us know what the behaviour you expect is, and what is actually happening. Let us know what operating system you are running on, and what terminal you are using.

In the example code, the white boxes are in a Grid layout. When the sidebar comes out, the boxes in the grid 'snap' to their new position based on the adjustment needed due to the sidebar. However, the sidebar uses transition to ease into its position.

The difference in movement types isn't a problem necessarily, but it's not cohesive either.

desired: ability to apply the same animation to how the grid positions itself
desired: the right edge of the sidebar and left edge of the left-most white box move together at the same speed

Feel free to add screenshots and/or videos. These can be very helpful!

vokoscreenNG-2022-11-04_16-07-22.mp4

If you can, include a complete working example that demonstrates the bug. Please check it can run without modifications.

class Demo(App):
    TITLE = "Demonstration"
    BINDINGS = [
        ("s", "toggle_sidebar", "Sidebar"),
        ("b", "toggle_bottombar", "Bottombar"),
    ]
    CSS = """
    Screen {
        layout: grid;
        grid-size: 2 5;
    }

    .box {
        height: 100%;
        border: round white;
    }

    #left-main {
        row-span: 5;
    }
    
    #right-main {
        row-span: 5;
    }

    #sidebar {
        display: none;
        offset-x: -100%;
    }

    Demo.-show-sidebar #sidebar {
        display: block;
        dock: left;

        border: round yellow;

        height: 100%;
        max-width: 33%;
        margin-bottom: 1;

        transition: offset 500ms in_out_cubic;
        offset-x: 0;
    }

    #bottombar {
        display: none;
        offset-y: 100%;
    }

    Demo.-show-bottombar #bottombar {
        display: block;
        dock: bottom;

        border: round red;

        max-height: 33%;
        width: 100%;
        margin-bottom: 1;

        transition: offset 500ms in_out_cubic;
        offset-y: 0;
    }

    Demo.-show-sidebar.-show-bottombar #bottombar {
        offset-x: 47%;
        width: 68%;
    }

    """

    def compose(self) -> ComposeResult:
        # yield Header()
        yield Static(classes="box", id="left-main")
        yield Static(classes="box", id="right-main")
        yield Static(classes="box", id="sidebar")
        yield Static(classes="box", id="bottombar")
        yield Footer()

    def action_toggle_sidebar(self) -> None:
        if "-show-sidebar" in self.classes:
            self.remove_class("-show-sidebar")
        else:
            self.add_class("-show-sidebar")

    def action_toggle_bottombar(self) -> None:
        if "-show-bottombar" in self.classes:
            self.remove_class("-show-bottombar")
        else:
            self.add_class("-show-bottombar")


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

[davep]

I suspect that this is very closely related to #1124 and that any changes to animations will come out of that. It's also worth noting that the animation system is still a bit of a work-in-progress and it's expected that there will be changes.

I'll close this in preference to #1124 as a but of a catch-all for this.

[github-actions]

Did we solve your problem?

Glad we could help!