14.0.0 • Published 12 months ago

@material/animation v14.0.0

Weekly downloads
132,618
License
MIT
Repository
github
Last release
12 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
@frannca/ngx-admintest-component-library-stencil@everything-registry/sub-chunk-584test-checkboxtest-chipstest-rsmdc@codeadraas/vue3-material@detachhead/smui-extra-accordion@detachhead/smui-menu-surface@cpangular/ng-material-themestencil-todo-list@authentic/mwc-tooltip@aurelia-material-components/core@betazuul/snackbar@bringhub/fabric.jsvue-material-design-componentswebpageplayingmaterialdesignuqlibrary-react-toolbox@gmvdev/materials@infinitebrahmanuniverse/nolb-_mate@labstack/data-table@maicol07/mwa-card@maicol07/mwc-card@material/tab-scroller@material/tabs@material/textfield@material/top-app-bar@material/tooltip@material/menu-surface@material/select@material/slider@material/snackbar@material/switch@material/tab-indicator@material/tab-bar@material/icon-toggle@material/linear-progress@material/floating-label@material/line-ripple@material/radio@material/ripple@material/dialog@material/checkbox@material/drawer@material/chips@material/fab@material/elevation@material/data-table@material/circular-progress@emuanalytics/flow-rdf@material-react-web/checkbox@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@mirana/materialize@mdcext/date-picker@mdcext/input-dialog@mdcext/multiselect@mdc-react/checkbox@hieunv/react-mdc@react-material/checkbox@react-universal-dialogs/android@plonquo/ember-material-components@react.material/switch@react.native.material/checkbox@react.material/checkbox@rmwc/menu@o-rango/orango-material-design@smui-extra/accordion@smui/menu-surface@shughesuk/pipewrench-modelernang-mdc-testreact-mdcsariska-cobrowsingsariska-webapppreact-material-componentspreact-material-components-mgrmaterial-components-webmaterial-toolboxmdsc-navigation@vue-cruder/ui@xdam/ember-partials@types/material__animation@tutorbook/error-msg@unipapa/unipapa-style@streamjar/ui-sharedbw-materialember-cli-mdc-animationember-material-components
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.0.0

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.41.0

7 years ago

0.40.1

7 years ago

0.39.0

7 years ago

0.34.0

7 years ago

0.25.0

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.5

8 years ago

0.1.4

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago