Add animation/transition delay support

sandbox/darren/basic.css

@@ -0,0 +1,252 @@
+/* CSS file for basic.py */
+
+
+
+ * {
+    transition: color 300ms linear, background 300ms linear;
+}
+
+
+*:hover {
+  /* tint: 30% red;
+  /* outline: heavy red; */
+}
+
+App > Screen {
+
+  background: $surface;
+  color: $text-surface;
+  layers: base sidebar;
+
+  color: $text-background;
+  background: $background;
+  layout: vertical;
+
+  overflow: hidden;
+
+}
+
+#tree-container {
+  overflow-y: auto;
+  height: 20;
+  margin: 1 2;
+  background: $panel;
+  padding: 1 2;
+}
+
+DirectoryTree {
+    padding: 0 1;
+    height: auto;
+
+}
+
+
+
+
+DataTable {
+  /*border:heavy red;*/
+  /* tint: 10% green; */
+  /* opacity: 50%; */
+  padding: 1;
+  margin: 1 2;
+  height: 24;
+}
+
+#sidebar {
+  color: $text-panel;
+  background: $panel;
+  dock: left;
+  width: 30;
+  margin-bottom: 1;
+  offset-x: -100%;
+  transition: offset 500ms in_out_cubic 2s;
+  layer: sidebar;
+}
+
+#sidebar.-active {
+  offset-x: 0;
+}
+
+#sidebar .title {
+  height: 1;
+  background: $primary-background-darken-1;
+  color: $text-primary-background-darken-1;
+  border-right: wide $background;
+  content-align: center middle;
+}
+
+#sidebar .user {
+  height: 8;
+  background: $panel-darken-1;
+  color: $text-panel-darken-1;
+  border-right: wide $background;
+  content-align: center middle;
+}
+
+#sidebar .content {
+  background: $panel-darken-2;
+  color: $text-surface;
+  border-right: wide $background;
+  content-align: center middle;
+}
+
+
+
+
+Tweet {
+  height:12;
+  width: 100%;
+
+
+  background: $panel;
+  color: $text-panel;
+  layout: vertical;
+  /* border: outer $primary; */
+  padding: 1;
+  border: wide $panel;
+  overflow: auto;
+  /* scrollbar-gutter: stable; */
+  align-horizontal: center;
+  box-sizing: border-box;
+}
+
+
+.scrollable {
+  overflow-x: auto;
+  overflow-y: scroll;
+  margin: 1 2;
+  height: 24;
+  align-horizontal: center;
+  layout: vertical;
+}
+
+.code {
+  height: auto;
+
+}
+
+
+TweetHeader {
+  height:1;
+  background: $accent;
+  color: $text-accent
+}
+
+TweetBody {
+  width: 100%;
+  background: $panel;
+  color: $text-panel;
+  height: auto;
+  padding: 0 1 0 0;
+}
+
+Tweet.scroll-horizontal TweetBody {
+  width: 350;
+}
+
+.button {
+  background: $accent;
+  color: $text-accent;
+  width:20;
+  height: 3;
+  /* border-top: hidden  $accent-darken-3;  */
+  border: tall $accent-darken-2;
+  /* border-left: tall $accent-darken-1; */
+
+
+  /* padding: 1 0 0 0 ; */
+
+  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
+
+}
+
+.button:hover {
+  background: $accent-lighten-1;
+  color: $text-accent-lighten-1;
+  width: 20;
+  height: 3;
+  border: tall $accent-darken-1;
+  /* border-left: tall $accent-darken-3; */
+
+
+
+
+}
+
+#footer {
+  color: $text-accent;
+  background: $accent;
+  height: 1;
+
+  content-align: center middle;
+  dock:bottom;
+}
+
+
+#sidebar .content {
+  layout: vertical
+}
+
+OptionItem {
+  height: 3;
+  background: $panel;
+  border-right: wide $background;
+  border-left: blank;
+  content-align: center middle;
+}
+
+OptionItem:hover {
+  height: 3;
+  color: $text-primary;
+  background: $primary-darken-1;
+  /* border-top: hkey $accent2-darken-3;
+  border-bottom: hkey $accent2-darken-3; */
+  text-style: bold;
+  border-left: outer $secondary-darken-2;
+}
+
+Error {
+  width: 100%;
+  height:3;
+  background: $error;
+  color: $text-error;
+  border-top: tall $error-darken-2;
+  border-bottom: tall $error-darken-2;
+
+  padding: 0;
+  text-style: bold;
+  align-horizontal: center;
+}
+
+Warning {
+  width: 100%;
+  height:3;
+  background: $warning;
+  color: $text-warning-fade-1;
+  border-top: tall $warning-darken-2;
+  border-bottom: tall $warning-darken-2;
+
+  text-style: bold;
+  align-horizontal: center;
+}
+
+Success {
+  width: 100%;
+
+  height:auto;
+  box-sizing: border-box;
+  background: $success;
+  color: $text-success-fade-1;
+
+  border-top: hkey $success-darken-2;
+  border-bottom: hkey $success-darken-2;
+
+  text-style: bold ;
+
+  align-horizontal: center;
+}
+
+
+.horizontal {
+  layout: horizontal
+}

sandbox/darren/basic.py

@@ -0,0 +1,235 @@
+from rich.console import RenderableType
+
+from rich.syntax import Syntax
+from rich.text import Text
+
+from textual.app import App, ComposeResult
+from textual.reactive import Reactive
+from textual.widget import Widget
+from textual.widgets import Static, DataTable, DirectoryTree, Header, Footer
+from textual.layout import Container
+
+CODE = '''
+from __future__ import annotations
+
+from typing import Iterable, TypeVar
+
+T = TypeVar("T")
+
+
+def loop_first(values: Iterable[T]) -> Iterable[tuple[bool, T]]:
+    """Iterate and generate a tuple with a flag for first value."""
+    iter_values = iter(values)
+    try:
+        value = next(iter_values)
+    except StopIteration:
+        return
+    yield True, value
+    for value in iter_values:
+        yield False, value
+
+
+def loop_last(values: Iterable[T]) -> Iterable[tuple[bool, T]]:
+    """Iterate and generate a tuple with a flag for last value."""
+    iter_values = iter(values)
+    try:
+        previous_value = next(iter_values)
+    except StopIteration:
+        return
+    for value in iter_values:
+        yield False, previous_value
+        previous_value = value
+    yield True, previous_value
+
+
+def loop_first_last(values: Iterable[T]) -> Iterable[tuple[bool, bool, T]]:
+    """Iterate and generate a tuple with a flag for first and last value."""
+    iter_values = iter(values)
+    try:
+        previous_value = next(iter_values)
+    except StopIteration:
+        return
+    first = True
+    for value in iter_values:
+        yield first, False, previous_value
+        first = False
+        previous_value = value
+    yield first, True, previous_value
+'''
+
+
+lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum."""
+lorem = (
+    lorem_short
+    + """ In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
+)
+
+lorem_short_text = Text.from_markup(lorem_short)
+lorem_long_text = Text.from_markup(lorem * 2)
+
+
+class TweetHeader(Widget):
+    def render(self) -> RenderableType:
+        return Text("Lorem Impsum", justify="center")
+
+
+class TweetBody(Widget):
+    short_lorem = Reactive(False)
+
+    def render(self) -> Text:
+        return lorem_short_text if self.short_lorem else lorem_long_text
+
+
+class Tweet(Widget):
+    pass
+
+
+class OptionItem(Widget):
+    def render(self) -> Text:
+        return Text("Option")
+
+
+class Error(Widget):
+    def render(self) -> Text:
+        return Text("This is an error message", justify="center")
+
+
+class Warning(Widget):
+    def render(self) -> Text:
+        return Text("This is a warning message", justify="center")
+
+
+class Success(Widget):
+    def render(self) -> Text:
+        return Text("This is a success  message", justify="center")
+
+
+class BasicApp(App, css_path="basic.css"):
+    """A basic app demonstrating CSS"""
+
+    def on_load(self):
+        """Bind keys here."""
+        self.bind("s", "toggle_class('#sidebar', '-active')", description="Sidebar")
+        self.bind("d", "toggle_dark", description="Dark mode")
+        self.bind("q", "quit", description="Quit")
+        self.bind("f", "query_test", description="Query test")
+
+    def compose(self):
+        yield Header()
+
+        table = DataTable()
+        self.scroll_to_target = Tweet(TweetBody())
+
+        yield Container(
+            Tweet(TweetBody()),
+            Widget(
+                Static(
+                    Syntax(CODE, "python", line_numbers=True, indent_guides=True),
+                    classes="code",
+                ),
+                classes="scrollable",
+            ),
+            table,
+            Widget(DirectoryTree("~/code/textual"), id="tree-container"),
+            Error(),
+            Tweet(TweetBody(), classes="scrollbar-size-custom"),
+            Warning(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Success(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+        )
+        yield Widget(
+            Widget(classes="title"),
+            Widget(classes="user"),
+            OptionItem(),
+            OptionItem(),
+            OptionItem(),
+            Widget(classes="content"),
+            id="sidebar",
+        )
+        yield Footer()
+
+        table.add_column("Foo", width=20)
+        table.add_column("Bar", width=20)
+        table.add_column("Baz", width=20)
+        table.add_column("Foo", width=20)
+        table.add_column("Bar", width=20)
+        table.add_column("Baz", width=20)
+        table.zebra_stripes = True
+        for n in range(100):
+            table.add_row(*[f"Cell ([b]{n}[/b], {col})" for col in range(6)])
+
+    def on_mount(self):
+        self.sub_title = "Widget demo"
+
+    async def on_key(self, event) -> None:
+        await self.dispatch_key(event)
+
+    def action_toggle_dark(self):
+        self.dark = not self.dark
+
+    def action_query_test(self):
+        query = self.query("Tweet")
+        self.log(query)
+        self.log(query.nodes)
+        self.log(query)
+        self.log(query.nodes)
+
+        query.set_styles("outline: outer red;")
+
+        query = query.exclude(".scroll-horizontal")
+        self.log(query)
+        self.log(query.nodes)
+
+        # query = query.filter(".rubbish")
+        # self.log(query)
+        # self.log(query.first())
+
+    async def key_q(self):
+        await self.shutdown()
+
+    def key_x(self):
+        self.panic(self.tree)
+
+    def key_escape(self):
+        self.app.bell()
+
+    def key_t(self):
+        # Pressing "t" toggles the content of the TweetBody widget, from a long "Lorem ipsum..." to a shorter one.
+        tweet_body = self.query("TweetBody").first()
+        tweet_body.short_lorem = not tweet_body.short_lorem
+
+    def key_v(self):
+        self.get_child(id="content").scroll_to_widget(self.scroll_to_target)
+
+    def key_space(self):
+        self.bell()
+
+
+app = BasicApp()
+
+if __name__ == "__main__":
+    app.run()
+
+    # from textual.geometry import Region
+    # from textual.color import Color
+
+    # print(Region.intersection.cache_info())
+    # print(Region.overlaps.cache_info())
+    # print(Region.union.cache_info())
+    # print(Region.split_vertical.cache_info())
+    # print(Region.__contains__.cache_info())
+    # from textual.css.scalar import Scalar
+
+    # print(Scalar.resolve_dimension.cache_info())
+
+    # from rich.style import Style
+    # from rich.cells import cached_cell_len
+
+    # print(Style._add.cache_info())
+
+    # print(cached_cell_len.cache_info())

sandbox/darren/just_a_box.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from rich.console import RenderableType
+from rich.panel import Panel
 
 from textual import events
 from textual.app import App, ComposeResult
@@ -16,7 +17,7 @@ class Box(Widget, can_focus=True):
         super().__init__(*children, id=id, classes=classes)
 
     def render(self) -> RenderableType:
-        return "Box"
+        return Panel("Box")
 
 
 class JustABox(App):
@@ -29,7 +30,8 @@ class JustABox(App):
             self.box.styles,
             "opacity",
             value=0.0,
-            duration=2.0,
+            duration=1.0,
+            delay=5.0,
             on_complete=self.box.remove,
         )
 

sandbox/will/basic.css

@@ -60,7 +60,7 @@ DataTable {
   margin-bottom: 1;
   offset-x: -100%;
 
-  transition: offset 500ms in_out_cubic;
+  transition: offset 500ms in_out_cubic 2s;
   layer: sidebar;
 }
 

src/textual/_animator.py

@@ -11,6 +11,7 @@ from . import _clock
 from ._easing import DEFAULT_EASING, EASING
 from ._timer import Timer
 from ._types import MessageTarget
+from .geometry import clamp
 
 if sys.version_info >= (3, 8):
     from typing import Protocol, runtime_checkable
@@ -56,6 +57,7 @@ class SimpleAnimation(Animation):
     attribute: str
     start_time: float
     duration: float
+    delay: float
     start_value: float | Animatable
     end_value: float | Animatable
     final_value: object
@@ -68,7 +70,7 @@ class SimpleAnimation(Animation):
             setattr(self.obj, self.attribute, self.final_value)
             return True
 
-        factor = min(1.0, (time - self.start_time) / self.duration)
+        factor = clamp((time - self.start_time - self.delay) / self.duration, 0.0, 1.0)
         eased_factor = self.easing(factor)
 
         if factor == 1.0:
@@ -121,6 +123,7 @@ class BoundAnimator:
         final_value: object = ...,
         duration: float | None = None,
         speed: float | None = None,
+        delay: float = 0.0,
         easing: EasingFunction | str = DEFAULT_EASING,
         on_complete: Callable[[], None] | None = None,
     ) -> None:
@@ -132,6 +135,7 @@ class BoundAnimator:
             final_value=final_value,
             duration=duration,
             speed=speed,
+            delay=delay,
             easing=easing_function,
             on_complete=on_complete,
         )
@@ -177,6 +181,7 @@ class Animator:
         final_value: object = ...,
         duration: float | None = None,
         speed: float | None = None,
+        delay: float = 0.0,
         easing: EasingFunction | str = DEFAULT_EASING,
         on_complete: Callable[[], None] | None = None,
     ) -> None:
@@ -189,6 +194,7 @@ class Animator:
             final_value (Any, optional): The final value, or ellipsis if it is the same as ``value``. Defaults to ....
             duration (float | None, optional): The duration of the animation, or ``None`` to use speed. Defaults to ``None``.
             speed (float | None, optional): The speed of the animation. Defaults to None.
+            delay (float): How long to delay the beginning of the animation by in seconds.
             easing (EasingFunction | str, optional): An easing function. Defaults to DEFAULT_EASING.
         """
 
@@ -202,6 +208,7 @@ class Animator:
 
         if final_value is ...:
             final_value = value
+
         start_time = self._get_time()
 
         animation_key = (id(obj), attribute)
@@ -217,6 +224,7 @@ class Animator:
                 duration=duration,
                 speed=speed,
                 easing=easing_function,
+                delay=delay,
                 on_complete=on_complete,
             )
         if animation is None:
@@ -236,6 +244,7 @@ class Animator:
                 attribute=attribute,
                 start_time=start_time,
                 duration=animation_duration,
+                delay=delay,
                 start_value=start_value,
                 end_value=value,
                 final_value=final_value,

src/textual/css/scalar_animation.py

@@ -2,7 +2,7 @@ from __future__ import annotations
 
 from typing import TYPE_CHECKING, Callable
 
-from ..geometry import Offset
+from ..geometry import Offset, clamp
 from .._animator import Animation
 from .scalar import ScalarOffset
 from .._animator import EasingFunction
@@ -24,6 +24,7 @@ class ScalarAnimation(Animation):
         duration: float | None,
         speed: float | None,
         easing: EasingFunction,
+        delay: float = 0.0,
         on_complete: Callable[[], None] | None = None,
     ):
         assert (
@@ -35,6 +36,7 @@ class ScalarAnimation(Animation):
         self.attribute = attribute
         self.final_value = value
         self.easing = easing
+        self.delay = delay
         self.on_complete = on_complete
 
         size = widget.outer_size
@@ -51,8 +53,7 @@ class ScalarAnimation(Animation):
             self.duration = duration
 
     def __call__(self, time: float) -> bool:
-
-        factor = min(1.0, (time - self.start_time) / self.duration)
+        factor = clamp((time - self.start_time - self.delay) / self.duration, 0.0, 1.0)
         eased_factor = self.easing(factor)
 
         if eased_factor >= 1:

src/textual/css/styles.py

@@ -579,12 +579,9 @@ class Styles(StylesBase):
         duration: float | None,
         speed: float | None,
         easing: EasingFunction,
+        delay: float = 0.0,
         on_complete: Callable[[], None] = None,
     ) -> Animation | None:
-        from ..widget import Widget
-
-        # node = self.node
-        # assert isinstance(self.node, Widget)
         if isinstance(value, ScalarOffset):
             return ScalarAnimation(
                 self.node,
@@ -595,6 +592,7 @@ class Styles(StylesBase):
                 duration=duration,
                 speed=speed,
                 easing=easing,
+                delay=delay,
                 on_complete=on_complete,
             )
         return None

src/textual/css/stylesheet.py

@@ -407,13 +407,14 @@ class Stylesheet:
                 if is_animatable(key) and new_render_value != old_render_value:
                     transition = new_styles.get_transition(key)
                     if transition is not None:
-                        duration, easing, _delay = transition
+                        duration, easing, delay = transition
                         node.app.animator.animate(
                             node.styles.base,
                             key,
                             new_render_value,
                             final_value=new_value,
                             duration=duration,
+                            delay=delay,
                             easing=easing,
                         )
                         continue

tests/css/test_parse.py

@@ -1040,8 +1040,9 @@ class TestParseTransition:
     def test_various_duration_formats(self, duration, parsed_duration):
         easing = "in_out_cubic"
         transition_property = "offset"
+        delay = duration
         css = f"""#some-widget {{
-            transition: {transition_property} {duration} {easing} {duration};
+            transition: {transition_property} {duration} {easing} {delay};
         }}
         """
         stylesheet = Stylesheet()