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;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;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;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;The default enter transition time.
$rmd-transition-enter-duration: 0.2s !default;The default leave transition time.
$rmd-transition-leave-duration: 0.15s !default;The default transition time for a linear animation/transition.
$rmd-transition-standard-time: 0.15s !default;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;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;The distance that the cross fade animation should move. This will be applied to translateY.
$rmd-cross-fade-translate-distance: -1rem !default;The transition duration for the cross fade animation.
$rmd-cross-fade-transition-duration: 0.3s !default;The transition enter duration for the scaling animation.
$rmd-transition-scale-enter-duration: $rmd-transition-enter-duration !default;The transition leave duration for the scaling animation.
$rmd-transition-scale-leave-duration: $rmd-transition-leave-duration !default;The transition enter duration for the vertical scale animation.
$rmd-transition-scale-y-enter-duration: $rmd-transition-enter-duration !default;The transition leave duration for the vertical scale animation.
$rmd-transition-scale-y-leave-duration: $rmd-transition-leave-duration !default;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;Adds a transition timing function for the provided transition type.
| Name | Description | Type | Default Value |
|---|---|---|---|
$type | The transition type that should be used. This should be one of the keys for | String | — |
$animation | Boolean if this should be applied to the animation timing function instead of the transition timing function. | Boolean | — |
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.
| Name | Description | Type | Default Value |
|---|---|---|---|
$shadow | The box shadow to apply. | String | — |
This includes the base styles for animating the pseudo element's shadow. This should really only be used internally.
| Name | Description | Type | Default 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. | Number | 0 |
A mixin that allows you to animate box shadow performantly.
| Name | Description | Type | Default 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 | List|String | — |
$before | Boolean if the | Boolean | true |
$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 | Number | 0 |
@use "react-md" as *;
.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')
);
}
@use "react-md" as *;
.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'
);
}
Creates the styles for the Collapse component within react-md
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.
Creates the transition theme css variables as well as the styles for components in the transition package.