10 examples of 'material ui animations' in JavaScript

Every line of 'material ui animations' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
84static get activity_close_exit_ios():Animation {
85 let anim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, 0, 0, 0, 0);
86 anim.setDuration(300);
87 return anim;
88}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

10export function fade(opacity: number = 1): AnimationMetadata[] {
11 return [
12 transition('void => *', [style({ opacity: 0 }), animate(defaultAnimationTiming, style({ opacity: opacity }))]),
13 transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0 }))]),
14 ];
15}
37public static fromRight(time=UIAnimation.ANIMATION_TIME_NORMAL){
38 return [transition(':enter', [
39 style({transform:'translateX(100%)'}),
40 animate(time, style({transform:'translateX(0)'}))
41 ]),
42 transition(':leave', [
43 style({transform:'translateX(0)'}),
44 animate(time, style({transform:'translateX(100%)'})) ])
45 ];
46}
287_onAnimationDone(event: AnimationEvent) {
288 // After the initial expansion is done, trigger the second phase of the enter animation.
289 if (event.toState === 'enter-start') {
290 this._panelAnimationState = 'enter';
291 }
292}
469_onAnimationDone(event) {
470 // After the initial expansion is done, trigger the second phase of the enter animation.
471 if (event.toState === 'enter-start') {
472 this._panelAnimationState = 'enter';
473 }
474}
200cancelAnimations() {
201 if (this.mActiveEasing) {
202 this.mActiveEasing.stop();
203 this.mActiveEasing = null;
204 }
205}
7export function menuPushAnimation(AnimationC, _, menu) {
8 let contentOpenedX;
9 let menuClosedX;
10 const width = menu.width;
11 if (menu.isEndSide) {
12 contentOpenedX = -width + 'px';
13 menuClosedX = width + 'px';
14 }
15 else {
16 contentOpenedX = width + 'px';
17 menuClosedX = -width + 'px';
18 }
19 const menuAnimation = new AnimationC()
20 .addElement(menu.menuInnerEl)
21 .fromTo('translateX', menuClosedX, '0px');
22 const contentAnimation = new AnimationC()
23 .addElement(menu.contentEl)
24 .fromTo('translateX', '0px', contentOpenedX);
25 const backdropAnimation = new AnimationC()
26 .addElement(menu.backdropEl)
27 .fromTo('opacity', 0.01, 0.32);
28 return baseAnimation(AnimationC).then(animation => {
29 return animation.add(menuAnimation)
30 .add(backdropAnimation)
31 .add(contentAnimation);
32 });
33}
7export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
8 const baseAnimation = new Animation();
9
10 const backdropAnimation = new Animation();
11 backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
12
13 const wrapperAnimation = new Animation();
14 const wrapperEl = baseEl.querySelector('.modal-wrapper');
15 wrapperAnimation.addElement(wrapperEl);
16 const wrapperElRect = wrapperEl.getBoundingClientRect();
17
18 wrapperAnimation.beforeStyles({ 'opacity': 1 })
19 .fromTo('translateY', '0%', `${window.innerHeight - wrapperElRect.top}px`);
20
21 backdropAnimation.fromTo('opacity', 0.4, 0.0);
22
23 return Promise.resolve(baseAnimation
24 .addElement(baseEl)
25 .easing('ease-out')
26 .duration(250)
27 .add(backdropAnimation)
28 .add(wrapperAnimation));
29}
83get animationType () {
84 return Platform.OS === 'ios' ? 'slide' : 'fade'
85}
84public animate(transition:Transition):void {
85 // Test if transition is one of the list that doesn't change the visible state.
86 // Should these eventually become classes?
87 const isDirectionless = ["jiggle", "flash", "shake", "pulse", "tada", "bounce"].indexOf(transition.type) !== -1;
88 if (isDirectionless) {
89 transition.direction = TransitionDirection.Static;
90 } else if (transition.direction == undefined || transition.direction === TransitionDirection.Either) {
91 // Set the direction to the opposite of the current visible state automatically if not set, or set to either direction.
92 transition.direction = this._isVisible ? TransitionDirection.Out : TransitionDirection.In;
93 if (this._queueLast) {
94 // If there is an transition in the queue already, set the direction to the opposite of the direction of that transition.
95 if (this._queueLast.direction === TransitionDirection.In) {
96 transition.direction = TransitionDirection.Out;
97 } else if (this._queueLast.direction === TransitionDirection.Out) {
98 transition.direction = TransitionDirection.In;
99 }
100 }
101 }
102
103 // Store the transition in the queue before attempting to perform it.
104 this._queue.push(transition);
105
106 this.performTransition();
107}

Related snippets