Animation configuration object. To use, create an MdPanelAnimation with the
desired properties, then pass the object as part of $mdPanel creation.
Usage
var panelAnimation = new MdPanelAnimation()
.openFrom(myButtonEl)
.duration(1337)
.closeTo('.my-button')
.withAnimation($mdPanel.animation.SCALE);
$mdPanel.create({
animation: panelAnimation
});
Methods
-
MdPanelAnimation.openFrom();
Specifies where to start the open animation. openFrom accepts a
click event object, query selector, DOM element, or a Rect object that
is used to determine the bounds. When passed a click event, the location
of the click will be used as the position to start the animation.
| Parameter |
Type |
Description |
*
stringElementEvent{top: number, left: number}
|
stringElementEvent{top: number, left: number} |
|
| Returns |
Description |
MdPanelAnimation |
|
-
MdPanelAnimation.closeTo();
Specifies where to animate the panel close. closeTo accepts a
query selector, DOM element, or a Rect object that is used to determine
the bounds.
| Parameter |
Type |
Description |
*
stringElement{top: number, left: number}
|
stringElement{top: number, left: number} |
|
| Returns |
Description |
MdPanelAnimation |
|
-
MdPanelAnimation.withAnimation(cssClass);
Specifies the animation class.
There are several default animations that can be used:
($mdPanel.animation)
SLIDE: The panel slides in and out from the specified
elements. It will not fade in or out.
SCALE: The panel scales in and out. Slide and fade are
included in this animation.
FADE: The panel fades in and out.
Custom classes will by default fade in and out unless
"transition: opacity 1ms" is added to the to custom class.
| Parameter |
Type |
Description |
* cssClass
string{open: string, close: string}
|
string{open: string, close: string} |
|
| Returns |
Description |
MdPanelAnimation |
|
-
MdPanelAnimation.duration(duration);
Specifies the duration of the animation in milliseconds. The duration
method accepts either a number or an object with separate open and close
durations.
| Parameter |
Type |
Description |
* duration
number{open: number, close: number}
|
number{open: number, close: number} |
|
| Returns |
Description |
MdPanelAnimation |
|