
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
@limetech/mdc-animation
Advanced tools
Animation Variables and Mixins used by Material Components for the web
Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.
npm install @limetech/mdc-animation
We provide timing functions which you can use with the animation
or transition
CSS properties
@import "@limetech/mdc-animation/variables";
.my-element--animating {
animation: foo-keyframe 175ms $mdc-animation-standard-curve-timing-function;
}
Variable | Description |
---|---|
mdc-animation-deceleration-curve-timing-function | Timing function to decelerate |
mdc-animation-standard-curve-timing-function | Timing function to quickly accelerate and slowly decelerate |
mdc-animation-acceleration-curve-timing-function | Timing function to accelerate |
mdc-animation-sharp-curve-timing-function | Timing 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 "@limetech/mdc-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 "@limetech/mdc-animation/functions";
@keyframes fade-in {
from {
transform: translateY(-5rem);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.my-element {
animation: mdc-animation-enter(/* $name: */ fade-in, /* $duration: */ 350ms);
}
Function | Description |
---|---|
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 |
These functions handle prefixing across various browsers
import {getCorrectEventName} from '@limetech/mdc-animation';
const eventToListenFor = getCorrectEventName(window, 'animationstart');
Method Signature | Description |
---|---|
getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType | PrefixedJsEventType | Returns a JavaScript event name, prefixed if necessary. See types.ts for supported values. |
getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName | PrefixedCssPropertyName | Returns a CSS property name, prefixed if necessary. See types.ts for supported values. |
FAQs
Animation Variables and Mixins used by Material Components for the web
We found that @limetech/mdc-animation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.