14.0.0 • Published 5 months ago

@material/animation v14.0.0

Weekly downloads
132,618
License
MIT
Repository
github
Last release
5 months ago

Animation

Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

Design & API Documentation

Installation

npm install @material/animation

Usage

Sass Variables

We provide timing functions which you can use with the animation or transition CSS properties

@import "@material/animation/variables";

.my-element--animating {
  animation: foo-keyframe 175ms $mdc-animation-standard-curve-timing-function;
}
VariableDescription
mdc-animation-deceleration-curve-timing-functionTiming function to decelerate
mdc-animation-standard-curve-timing-functionTiming function to quickly accelerate and slowly decelerate
mdc-animation-acceleration-curve-timing-functionTiming function to accelerate
mdc-animation-sharp-curve-timing-functionTiming function to quickly accelerate and decelerate

The following functions create transitions given $name and the $duration. You can also specify $delay, but the default is 0ms. $name can either refer to the keyframe, or to CSS property used in transition.

@import "@material/animation/functions";

.my-element {
  transition: mdc-animation-exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);
  opacity: 0;
  will-change: opacity;

  &--animating {
    transition: mdc-animation-enter(/* $name: */ opacity, /* $duration: */ 175ms);
    opacity: 1;
  }
}
@import "@material/animation/functions";

@keyframes fade-in {
  from {
    transform: translateY(-80px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.my-element {
  animation: mdc-animation-enter(/* $name: */ fade-in, /* $duration: */ 350ms);
}
FunctionDescription
mdc-animation-enter($name, $duration, $delay)Defines transition for entering the frame
mdc-animation-exit-permanent($name, $duration, $delay)Defines transition for exiting the frame permanently
mdc-animation-exit-temporary($name, $duration, $delay)Defines transition for exiting the frame temporarily

JavaScript

These functions handle prefixing across various browsers

import {getCorrectEventName} from '@material/animation';

const eventToListenFor = getCorrectEventName(window, 'animationstart');
Method SignatureDescription
getCorrectEventName(windowObj, eventType)Returns a JavaScript event name, prefixed if necessary
getCorrectPropertyName(windowObj, eventType)Returns a CSS property name, prefixed if necessary
@material/linear-progress@material/floating-label@material/line-ripple@material/drawer@material/dialog@material/fab@material/elevation@material/data-table@material/circular-progress@material/checkbox@material/chips@material/menu-surface@material/tab-scroller@material/select@material/top-app-bar@material/tooltip@material/ripple@material/slider@material/textfield@material/snackbar@material/switch@material/tab-indicator@material/tab-bar@material/radio@frannca/ngx-admintest-component-library-stencilmaterial-components-web@everything-registry/sub-chunk-584ember-cli-mdc-animationember-material-components@gmvdev/materials@hieunv/react-mdc@emuanalytics/flow-rdf@infinitebrahmanuniverse/nolb-_mate@smui-extra/accordion@smui/menu-surface@shughesuk/pipewrench-modeler@rmwc/menunang-mdc-test@react.material/switch@react.native.material/checkbox@react-universal-dialogs/android@react-material/checkbox@react.material/checkbox@streamjar/ui-shared@material-react-web/checkbox@material/icon-toggle@mirana/materializematerial-toolbox@labstack/data-table@maicol07/mwa-card@maicol07/mwc-card@material/tabs@materials-elements/core@materials-elements/site@materials-ui/site@materials-ui/core@mdcext/date-picker@mdcext/input-dialog@mdcext/multiselect@mdc-react/checkboxmdsc-navigation@o-rango/orango-material-design@plonquo/ember-material-componentspreact-material-componentspreact-material-components-mgr@tylertech/forge@tutorbook/error-msg@types/material__animation@angular/material@angular/material-experimental@authentic/mwc-tooltiptest-rsmdc@aurelia-material-components/coretest-checkboxtest-chipsbw-material@betazuul/snackbar@vue-cruder/uireact-mdcsariska-cobrowsingsariska-webappstencil-todo-list@unipapa/unipapa-style@xdam/ember-partials@bringhub/fabric.jsuqlibrary-react-toolbox@codeadraas/vue3-materialvue-material-design-components@detachhead/smui-extra-accordion@detachhead/smui-menu-surfacewebpageplayingmaterialdesign
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.39.0

6 years ago

0.34.0

6 years ago

0.25.0

6 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago