Transition Sass API

Variables

disable-transitions

$disable-transitions: false !default;

Set to true to disable all transition styles.

Used By

• @mixin transition-styles

disable-collapse-transition

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

Set to true to disable the collapse transition styles.

Used By

• @mixin transition-styles

disable-cross-fade-transition

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

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

Used By

• @mixin transition-styles

disable-scale-transition

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

Set to true to disable the scale transition styles.

Used By

• @mixin transition-styles

disable-scale-y-transition

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

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

Used By

• @mixin transition-styles

disable-skeleton-placeholder

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

Set to true to disable the skeleton placeholder transition styles.

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;

Set to true to disable the slide transition styles.

Used By

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

disable-max-width-transition

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

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

Used By

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

disable-max-width-transition-gap

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

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

Used By

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

linear-duration

$linear-duration: 0.15s !default;

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

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;

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

Used By

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

leave-duration

$leave-duration: 0.15s !default;

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

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;

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

Used By

• @mixin progress-_linear-progress-bar

linear-timing-function

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

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

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;

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

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;

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

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;

The starting position for the CrossFade transition.

Used By

• @mixin cross-fade-transition

cross-fade-transition-duration

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

The cross fade transition duration.

Used By

• @mixin cross-fade-transition

scale-transition-enter-duration

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

The scale transition enter duration.

Used By

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

scale-transition-leave-duration

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

The scale transition leave duration.

Used By

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

scale-y-transition-enter-duration

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

The scale transition y (vertical) enter duration.

Used By

• @mixin scale-y-transition

scale-y-transition-leave-duration

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

The scale transition y (vertical) leave duration.

Used By

• @mixin scale-y-transition

skeleton-placeholder-height

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

The default skeleton placeholder height.

Used By

• @mixin transition-variables

skeleton-placeholder-width

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

The default skeleton placeholder width`.

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-border-radius

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

The default skeleton placeholder border-radius.

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-light-background-color

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

The default light theme skeleton placeholder background color.

Used By

• @mixin transition-use-light-theme

skeleton-placeholder-dark-background-color

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

The default dark theme skeleton placeholder background color.

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;

The default skeleton placeholder background color

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;

The default skeleton placeholder @keyframes styles.

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-animation-duration

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

The default skeleton placeholder animation duration.

Used By

• @mixin skeleton-placeholder-animation

skeleton-placeholder-animation-timing-function

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

The default skeleton placeholder animation timing function.

Used By

• @mixin skeleton-placeholder-animation

slide-duration

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

The default slide transition duration.

Used By

• @mixin transition-variables

slide-timing-function

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

The default slide transition timing function.

Used By

• @mixin slide-transition

max-width-transition-duration

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

The default max width transition duration.

Used By

• @mixin transition-styles

max-width-transition-timing-function

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

The default max width transition timing function.

Used By

• @mixin transition-styles

max-width-transition-default

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

The default max width transition's max-width

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
);

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

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 { … }

Applies the light the variables based on feature flags

Requires

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

transition-use-dark-theme

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

Applies the dark the variables based on feature flags

Requires

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

collapse-transition

@mixin collapse-transition { … }

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

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

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

cross-fade-transition

@mixin cross-fade-transition { … }

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

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 { … }

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

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 { … }

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

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 { … }

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

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 { … }

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

See Also

• @mixin transition-styles

Used By

• @mixin transition-styles

Requires

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

transition-variables

@mixin transition-variables { … }

Conditionally applies the css variables based on feature flags

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) { … }

Generates all the styles based on feature flags.

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

a var() statement

Used By

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

Requires

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