10 examples of 'material ui animations' in JavaScript

84
static 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
}

10
export 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
}

37
public 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
}

200
cancelAnimations() {
201
    if (this.mActiveEasing) {
202
        this.mActiveEasing.stop();
203
        this.mActiveEasing = null;
204
    }
205
}

7
export 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
}

7
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise {
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
}

83
get animationType () {
84
  return Platform.OS === 'ios' ? 'slide' : 'fade'
85
}

84
public 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
}