[ENHANCEMENT] individual control over x/y planes when using CSS transition

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.

it would be nice to have individual control over x/y planes when using CSS transition

current: When the sidebar is visible, the bottom bar has to traverse the x and y planes to arrive at its destination. desired: When the sidebar is visible, set the bottom bar’s offset-x without animation and offset-y with animation, such that it appears to rise directly up into its proper spot. proposed: transition: offset|offset-x|offset-y

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

bottom bar coming in from the left and bottom https://user-images.githubusercontent.com/43392618/200075288-dba77a71-66fb-4d44-8d63-26f4b8f51646.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()

[epi052]

tyty, i definitely noticed, lol. Also, the Containers remove a lot of little manual tweaks i was doing in css, like margin-bottom: 1 etc… really appreciate the help!

[davep]

PS: Also want to highlight the use of toggle_class – that’ll save you a wee bit of code.