Table of Contents

Transition directives

Transition directives animate a set of style: or layout: directives smoothly when their bound value changes, instead of applying the change instantly.

Properties, Duration, Easing

Directive name: transition:properties, transition:duration, transition:easing

Values:

Directive Value
transition:properties A comma-separated list of the directive names to animate, for example "opacity, translate".
transition:duration The animation duration, in milliseconds.
transition:easing A CSS easing function, for example ease, ease-out, ease-in, linear.

Example:

<horizontal-layout
    style:opacity="@Computeds.RowOpacity"
    style:translate="@Computeds.RowTranslateValue"
    transition:properties="opacity, translate"
    transition:duration="150"
    transition:easing="ease-out"
>
    ...
</horizontal-layout>

In this example, a change to @Computeds.RowOpacity or @Computeds.RowTranslateValue fades and slides the element over 150ms instead of snapping to the new value.

Result:

Row
Row
opacity 0, translate 0 12
Row
Row
during the 150ms
Row
after 150ms: opacity 1, translate 0 0

transition:properties accepts the same directive name you already used in style:, even when several directives compose into a single CSS property under the hood: style:rotate, style:rotate-x, style:rotate-y, style:scale and style:translate all animate together as transform (see Combining transformations), and every style:shadow-* directive animates together as box-shadow. Listing any one of them is enough to animate the whole group.

Note

style:font-scale cannot be animated: unlike other style:* directives, it does not set a single CSS property on its own element, but a custom property that cascades down to descendants, each computing their own font-size from it. transition:properties="font-scale" has no effect - a bound style:font-scale value still changes text size instantly.

transition:properties also accepts layout:height, layout:width, layout:max-height and layout:max-width, for example to animate a collapsible panel:

<vertical-layout
    layout:max-height="@Computeds.PanelMaxHeight"
    style:overflow="hidden"
    transition:properties="max-height"
    transition:duration="300"
    transition:easing="ease"
>
    ...
</vertical-layout>

@Computeds.PanelMaxHeight returns "0" when collapsed and a fixed value at least as large as the panel's content when expanded. Animating to a fixed value, rather than to "auto", is what makes this work identically on every browser: no browser interpolates a transition to/from "auto" without an extra opt-in CSS feature, so a value that only barely happens to work in one browser is not a pattern to reach for here.

style:overflow="hidden" is required alongside layout:max-height: without it, the panel's content still overflows and stays visible below the collapsed "0" height instead of being clipped.

Important

Keep that fixed value close to the content's real height. transition:duration always applies to the whole "0" to target range, so a value far larger than the content reaches the content's real height in only a fraction of that duration - the panel visibly finishes opening almost instantly instead of animating over the configured duration.

transition:properties also accepts top, right, bottom and left to animate the position of a child of a canvas layout given by its canvas:top, canvas:right, canvas:bottom and canvas:left directives.

While a size (height, width, max-height or max-width) is animated, the scroll bar added by the LayoutOverflowFix option or by a fixed size of an input is paused, so that it does not flash.

See also