Skip to main content
react-md
Transition - SassDoc

Variables

rmd-transition-sharp

String

The transition timing to use for "sharp" transitions. Not really sure what a "sharp" transition is at the time of writing this though.

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

rmd-transition-standard

String

The transition timing function to use for standard/normal transitions. This is normally applied to moving elements within the page.

$rmd-transition-standard: cubic-bezier(0.4, 0, 0.2, 1) !default;

rmd-transition-acceleration

String

The transition timing function to use for transitions that should start the animation slowly and build up momentum at the end of the transition. This is normally used for exit/leave transitions.

$rmd-transition-acceleration: cubic-bezier(0.4, 0, 1, 1) !default;

rmd-transition-deceleration

String

The transition timing function to use for transitions that should start the animation quickly and slow down momentum at the end of the transition. This is normally used for enter/appear transitions.

$rmd-transition-deceleration: cubic-bezier(0, 0, 0.2, 1) !default;

rmd-transition-enter-duration

Number

The default enter transition time.

$rmd-transition-enter-duration: 0.2s !default;

rmd-transition-leave-duration

Number

The default leave transition time.

$rmd-transition-leave-duration: 0.15s !default;

rmd-transition-standard-time

Number

The default transition time for a linear animation/transition.

$rmd-transition-standard-time: 0.15s !default;

rmd-collapse-enter-transition-func

String

The transition easing function to apply when the collapse's content is animating in. This should be one of the $rmd-transitions keys.

$rmd-collapse-enter-transition-func: deceleration !default;

rmd-collapse-leave-transition-func

String

The transition easing function to apply when the collapse's content is animating out. This should be one of the $rmd-transitions keys.

$rmd-collapse-leave-transition-func: acceleration !default;

rmd-cross-fade-translate-distance

Number

The distance that the cross fade animation should move. This will be applied to translateY.

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

rmd-cross-fade-transition-duration

Number

The transition duration for the cross fade animation.

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

rmd-transition-scale-enter-duration

Number

The transition enter duration for the scaling animation.

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

rmd-transition-scale-leave-duration

Number

The transition leave duration for the scaling animation.

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

rmd-transition-scale-y-enter-duration

Number

The transition enter duration for the vertical scale animation.

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

rmd-transition-scale-y-leave-duration

Number

The transition leave duration for the vertical scale animation.

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

rmd-transitions

Map

A Map of all the different transitions supported.

$rmd-transitions: (
  sharp: $rmd-transition-sharp,
  standard: $rmd-transition-standard,
  acceleration: $rmd-transition-acceleration,
  deceleration: $rmd-transition-deceleration,
) !default;

Mixins

rmd-transition

mixin

Adds a transition timing function for the provided transition type.

Parameters
NameDescriptionTypeDefault Value
$type

The transition type that should be used. This should be one of the keys for $rmd-transitions

String
$animation

Boolean if this should be applied to the animation timing function instead of the transition timing function.

Boolean

rmd-transition-parent-shadow

mixin

This is really just used internally to apply a base box shadow and position relative so that the pseudo element with the end box shadow can be shown.

Parameters
NameDescriptionTypeDefault Value
$shadow

The box shadow to apply.

String

rmd-transition-pseudo-shadow

mixin

This includes the base styles for animating the pseudo element's shadow. This should really only be used internally.

Parameters
NameDescriptionTypeDefault Value
$shadow

The box shadow to apply.

String
$duration

The transition duration for the shadow opacity change.

String|Number
$z-index

The z-index to apply. This is set to 0 by default so that it can be shown more easily if there are child elements with position absolute.

Number0

rmd-transition-shadow-transition

mixin

A mixin that allows you to animate box shadow performantly.

Parameters
NameDescriptionTypeDefault Value
$start-shadow

The starting box-shadow to use.

String
$end-shadow

The ending box-shadow to use.

String
$active-selectors

Either a single string or a list of strings that is used to determine when the $end-shadow should be used.

List|String
$before

Boolean if the ::before or ::after pseudo selector should be used as the end-shadow target.

Booleantrue
$duration

The animation duration

String|Number$rmd-transition-standard-time
$pseudo-z-index

The z-index to apply. This is set to 0 by default so that it can be shown more easily if there are child elements with position absolute

Number0

Examples

Simple Usage
@import '@react-md/theme/dist/scss/color-palette';

.my-class {
  $start-shadow: inset 0 0 1px $rmd-blue-500;
  $end-shadow: inset 0 0 4px $rmd-blue-500;

  @include rmd-transition-shadow-transition(
    $start-shadow,
    $end-shadow,
    ('&:focus' '&:hover')
  );
}
Merging with elevation
@import '@react-md/elevation/dist/scss/functions';
@import '@react-md/theme/dist/scss/color-palette';

.my-class {
  $start-shadow: rmd-elevation(2);
  $end-shadow: rmd-elevation(4), inset 0 0 4px $rmd-blue-500;

  @include rmd-transition-shadow-transition(
    $start-shadow,
    $end-shadow,
    '&:focus'
  );
}

rmd-collapse

mixin

Creates the styles for the Collapse component within react-md

rmd-cross-fade

mixin

Creates the cross fade animation styles. This animation is usually used when loading in new parts of a page or page transitions as there is no exit animation by default.

rmd-transition-classes

mixin

react-md-transition

mixin

Creates the transition theme css variables as well as the styles for components in the transition package.