Transition Sass API

Variables

disable-transitions

$disable-transitions: false !default;

Used By

• @mixin transition-styles

disable-collapse-transition

$disable-collapse-transition: $disable-transitions !default;

Used By

• @mixin transition-styles

disable-cross-fade-transition

$disable-cross-fade-transition: $disable-transitions !default;

Used By

• @mixin transition-styles

disable-scale-transition

$disable-scale-transition: $disable-transitions !default;

Used By

• @mixin transition-styles

disable-scale-y-transition

$disable-scale-y-transition: $disable-scale-transition !default;

Used By

• @mixin transition-styles

disable-skeleton-placeholder

$disable-skeleton-placeholder: $disable-transitions !default;

Used By

• @mixin transition-use-light-theme
• @mixin transition-use-dark-theme
• @mixin transition-variables
• @mixin transition-styles

disable-slide-transition

$disable-slide-transition: $disable-transitions !default;

Used By

• @mixin transition-variables
• @mixin transition-styles

disable-max-width-transition

$disable-max-width-transition: $disable-transitions !default;

Used By

• @mixin transition-variables
• @mixin transition-styles

disable-max-width-transition-gap

$disable-max-width-transition-gap: $disable-max-width-transition !default;

Used By

• @mixin transition-variables
• @mixin transition-styles

linear-duration

$linear-duration: 0.15s !default;

Used By

• @mixin expansion-panel-styles
• @mixin interaction-surface
• @mixin label-styles
• @mixin layout-styles
• @mixin progress-_linear-progress-bar
• @mixin switch-styles
• @mixin table-styles
• @mixin text-area-textarea-container-styles
• @mixin text-field-container-styles
• @mixin text-field-text-field-styles
• @mixin window-splitter-styles

enter-duration

$enter-duration: 0.2s !default;

Used By

• @mixin dialog-styles
• @mixin layout-styles
• @mixin sheet-styles
• @mixin tooltip-styles

leave-duration

$leave-duration: 0.15s !default;

Used By

• @mixin dialog-styles
• @mixin layout-styles
• @mixin sheet-styles
• @mixin tooltip-styles

sharp-timing-function

$sharp-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;

Used By

• @mixin progress-_linear-progress-bar

linear-timing-function

$linear-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;

Used By

• @mixin box-shadow-transition
• @mixin interaction-surface
• @mixin layout-styles
• @mixin progress-_circular-progress
• @mixin progress-_linear-progress-bar
• @mixin switch-styles
• @mixin table-styles
• @mixin text-area-textarea-container-styles
• @mixin text-field-container-styles

acceleration-timing-function

$acceleration-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;

Used By

• @mixin collapse-transition
• @mixin scale-transition
• @mixin interaction-styles

deceleration-timing-function

$deceleration-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;

Used By

• @mixin collapse-transition
• @mixin cross-fade-transition
• @mixin scale-transition
• @mixin interaction-styles

cross-fade-translate-distance

$cross-fade-translate-distance: -1rem !default;

Used By

• @mixin cross-fade-transition

cross-fade-transition-duration

$cross-fade-transition-duration: 0.3s !default;

Used By

• @mixin cross-fade-transition

scale-transition-enter-duration

$scale-transition-enter-duration: $enter-duration !default;

Used By

• @mixin scale-transition
• @mixin scale-y-transition

scale-transition-leave-duration

$scale-transition-leave-duration: $leave-duration !default;

Used By

• @mixin scale-transition
• @mixin scale-y-transition

scale-y-transition-enter-duration

$scale-y-transition-enter-duration: $enter-duration !default;

Used By

• @mixin scale-y-transition

scale-y-transition-leave-duration

$scale-y-transition-leave-duration: $leave-duration !default;

Used By

• @mixin scale-y-transition

skeleton-placeholder-height

$skeleton-placeholder-height: 1.125em !default;

Used By

• @mixin transition-variables

skeleton-placeholder-width

$skeleton-placeholder-width: 43% !default;

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-border-radius

$skeleton-placeholder-border-radius: border-radius.get-var(xs) !default;

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-light-background-color

$skeleton-placeholder-light-background-color: #000 !default;

Used By

• @mixin transition-use-light-theme

skeleton-placeholder-dark-background-color

$skeleton-placeholder-dark-background-color: colors.$grey-300 !default;

Used By

• @mixin transition-use-dark-theme

skeleton-placeholder-background-color

$skeleton-placeholder-background-color: theme.get-default-color(
  $skeleton-placeholder-dark-background-color,
  $skeleton-placeholder-light-background-color
) !default;

Used By

• @mixin transition-variables

skeleton-placeholder-animation

$skeleton-placeholder-animation: (
  0%: (
    opacity: 0.06,
  ),
  60%: (
    opacity: 0.1,
  ),
  80%: (
    opacity: 0.08,
  ),
  100%: (
    opacity: 0.06,
  ),
) !default;

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-animation-duration

$skeleton-placeholder-animation-duration: 1.8s !default;

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-animation-timing-function

$skeleton-placeholder-animation-timing-function: ease-in-out !default;

Used By

• @mixin skeleton-placeholder-animation

slide-duration

$slide-duration: $linear-duration !default;

Used By

• @mixin transition-variables

slide-timing-function

$slide-timing-function: $linear-timing-function !default;

Used By

• @mixin slide-transition

max-width-transition-duration

$max-width-transition-duration: $linear-duration !default;

Used By

• @mixin transition-styles

max-width-transition-timing-function

$max-width-transition-timing-function: $linear-timing-function !default;

Used By

• @mixin transition-styles

max-width-transition-default

$max-width-transition-default: 100% !default;

Used By

• @mixin transition-variables

transition-variables

$transition-variables: (
  skeleton-placeholder-background-color,
  skeleton-placeholder-height,
  skeleton-placeholder-width,
  slide-duration,
  max-width,
  max-width-gap
);

Used By

• @function transition-get-var
• @mixin transition-set-var

Mixins

transition-set-var

@mixin transition-set-var($name, $value) { … }

Used By

• @mixin transition-use-light-theme
• @mixin transition-use-dark-theme
• @mixin transition-variables

Requires

• @function get-var-name
• @mixin transition-variables

transition-use-var

@mixin transition-use-var($property, $name: $property, $fallback: null) { … }

Used By

• @mixin skeleton-placeholder-animation
• @mixin transition-styles

Requires

• @function transition-get-var

transition-use-light-theme

@mixin transition-use-light-theme { … }

Requires

• @mixin transition-set-var
• $disable-skeleton-placeholder
• $skeleton-placeholder-light-background-color

transition-use-dark-theme

@mixin transition-use-dark-theme { … }

Requires

• @mixin transition-set-var
• $disable-skeleton-placeholder
• $skeleton-placeholder-dark-background-color

collapse-transition

@mixin collapse-transition { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• $deceleration-timing-function
• $acceleration-timing-function

cross-fade-transition

@mixin cross-fade-transition { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• $cross-fade-translate-distance
• $cross-fade-transition-duration
• $deceleration-timing-function

scale-transition

@mixin scale-transition { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• $scale-transition-enter-duration
• $deceleration-timing-function
• $scale-transition-leave-duration
• $acceleration-timing-function

scale-y-transition

@mixin scale-y-transition { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• $scale-y-transition-enter-duration
• $scale-transition-enter-duration
• $scale-y-transition-leave-duration
• $scale-transition-leave-duration

skeleton-placeholder-animation

@mixin skeleton-placeholder-animation { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• @mixin transition-use-var
• @mixin keyframes
• $skeleton-placeholder-animation-duration
• $skeleton-placeholder-animation-timing-function
• $skeleton-placeholder-border-radius
• $skeleton-placeholder-width
• @mixin skeleton-placeholder-animation

slide-transition

@mixin slide-transition { … }

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

• @function transition-get-var
• $slide-timing-function

transition-variables

@mixin transition-variables { … }

Requires

• @mixin transition-set-var
• $disable-skeleton-placeholder
• $skeleton-placeholder-background-color
• $skeleton-placeholder-height
• $disable-slide-transition
• $slide-duration
• $disable-max-width-transition
• $max-width-transition-default
• $disable-max-width-transition-gap

transition-styles

@mixin transition-styles($disable-layer: false) { … }

Requires

• @mixin collapse-transition
• @mixin cross-fade-transition
• @mixin scale-transition
• @mixin scale-y-transition
• @mixin skeleton-placeholder-animation
• @mixin slide-transition
• @mixin transition-use-var
• @function negate-var
• @function transition-get-var
• $disable-transitions
• $disable-collapse-transition
• $disable-cross-fade-transition
• $disable-scale-transition
• $disable-scale-y-transition
• $disable-skeleton-placeholder
• $disable-slide-transition
• $disable-max-width-transition
• $disable-max-width-transition-gap
• $max-width-transition-duration
• $max-width-transition-timing-function

Functions

transition-get-var

@function transition-get-var($name, $fallback: null) { … }

Returns — String

Used By

• @mixin transition-use-var
• @mixin slide-transition
• @mixin transition-styles

Requires

• @function get-var-name
• @mixin transition-variables

Set to true to disable all transition styles.

Set to true to disable the collapse transition styles.

Set to true to disable the cross-fade transition styles.

Set to true to disable the scale transition styles.

Set to true to disable the scale-y transition styles.

Set to true to disable the skeleton placeholder transition styles.

Set to true to disable the slide transition styles.

Set to true to disable the max-width transition styles.

Set to true to disable the max-width transition gap styles.

The default transition duration for linear transitions. i.e. a transition that has the same enter and leave duration.

The default transition duration when an element enters less quickly than it leaves.

The default transition duration when an element leaves more quickly than it enters.

A default transition-timing-function to use when an element should appear quickly.

A default transition-timing-function to use when an element should appear and exit at the same speed.

A default transition-timing-function to use when an element should accelerate during the transition.

A default transition-timing-function to use when an element should decelerate during the transition.

The starting position for the CrossFade transition.

The cross fade transition duration.

The scale transition enter duration.

The scale transition leave duration.

The scale transition y (vertical) enter duration.

The scale transition y (vertical) leave duration.

The default skeleton placeholder height.

The default skeleton placeholder width`.

The default skeleton placeholder border-radius.

The default light theme skeleton placeholder background color.

The default dark theme skeleton placeholder background color.

The default skeleton placeholder background color

The default skeleton placeholder @keyframes styles.

The default skeleton placeholder animation duration.

The default skeleton placeholder animation timing function.

The default slide transition duration.

The default slide transition timing function.

The default max width transition duration.

The default max width transition timing function.

The default max width transition's max-width

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

This should only be used if not using the transition-styles mixin.

This should only be used if not using the transition-styles mixin.

This should not be used if the transition-styles mixin is used.

This should not be used if the transition-styles mixin is used.

This should not be used if the transition-styles mixin is used.

This should not be used if the transition-styles mixin is used.

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value