javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(animations): remove inline styles when finished

Browse Source 
Allows for one animation to control multiple elements. Optionally
removes inline styles when the animation finishes. Fixes checking for
the will-change property. Does not always apply translateZ on ion-page.

Closes #5130
This commit is contained in:
Adam Bradley
2016-02-17 23:02:31 -06:00
parent d27bb628fc
commit 22c32f3ab5
5 changed files with 216 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
ionic/animations/animation.ts
View File

@ -8,15 +8,15 @@ import {assign, isDefined} from '../util/util';
export class Animation { export class Animation {
private _parent: Animation; private _parent: Animation;
private _c: Array<Animation>; private _c: Array<Animation>;
private _el: HTMLElement; private _el: Array<HTMLElement>;
private _opts; private _opts: AnimationOptions;
private _fx; private _fx: {[key: string]: EffectProperty};
private _dur: number; private _dur: number;
private _easing: string; private _easing: string;
private _bfSty; private _bfSty: any;
private _bfAdd: Array<string>; private _bfAdd: Array<string>;
private _bfRmv: Array<string>; private _bfRmv: Array<string>;
private _afSty; private _afSty: any;
private _afAdd: Array<string>; private _afAdd: Array<string>;
private _afRmv: Array<string>; private _afRmv: Array<string>;
private _pFns: Array<Function>; private _pFns: Array<Function>;
@ -25,13 +25,12 @@ export class Animation {
private _wChg: boolean = false; private _wChg: boolean = false;
private _rv: boolean; private _rv: boolean;
private _unregTrans: Function; private _unregTrans: Function;
private _tmr; private _tmr: any;
public isPlaying: boolean; public isPlaying: boolean;
public hasTween: boolean; public hasTween: boolean;
public meta;
constructor(ele?, opts: AnimationOptions = {}) { constructor(ele?: any, opts: AnimationOptions = {}) {
this._reset(); this._reset();
this.element(ele); this.element(ele);
@ -41,6 +40,7 @@ export class Animation {
} }
_reset() { _reset() {
this._el = [];
this._c = []; this._c = [];
this._fx = {}; this._fx = {};
@ -58,28 +58,45 @@ export class Animation {
this._clearAsync(); this._clearAsync();
this.isPlaying = this.hasTween = this._rv = false; this.isPlaying = this.hasTween = this._rv = false;
this._el = this._easing = this._dur = null; this._easing = this._dur = null;
} }
element(ele): Animation { element(ele: any): Animation {
var i;
if (ele) { if (ele) {
if (ele.nativeElement) { if (Array.isArray(ele)) {
ele = ele.nativeElement for (i = 0; i < ele.length; i++) {
this._addEle(ele[i]);
}
} else if (typeof ele === 'string') { } else if (typeof ele === 'string') {
ele = doc.querySelector(ele); ele = doc.querySelector(ele);
} for (i = 0; i < ele.length; i++) {
this._addEle(ele[i]);
}
if (ele && ele.nodeType === 1) { } else {
this._el = ele; this._addEle(ele);
// does this element suport will-change property?
this._wChg = ('opacity' in ele.style);
} }
} }
return this; return this;
} }
private _addEle(ele: any) {
if (ele.nativeElement) {
ele = ele.nativeElement;
}
if (ele.nodeType === 1) {
this._el.push(ele);
// does this element suport will-change property?
this._wChg = (typeof ele.style.willChange !== 'undefined');
}
}
parent(parentAnimation: Animation): Animation { parent(parentAnimation: Animation): Animation {
this._parent = parentAnimation; this._parent = parentAnimation;
return this; return this;
@ -109,33 +126,48 @@ export class Animation {
return this; return this;
} }
from(prop: string, val): Animation { from(prop: string, val: any): Animation {
return this._addProp('from', prop, val); this._addProp('from', prop, val);
return this;
} }
to(prop: string, val): Animation { to(prop: string, val: any, clearProperyAfterTransition?: boolean): Animation {
return this._addProp('to', prop, val); var fx = this._addProp('to', prop, val);
if (clearProperyAfterTransition) {
// if this effect is a transform then clear the transform effect
// otherwise just clear the actual property
this.after.clearStyles([ fx.trans ? CSS.transform : prop]);
}
return this;
} }
fromTo(prop: string, fromVal, toVal): Animation { fromTo(prop: string, fromVal: any, toVal: any, clearProperyAfterTransition?: boolean): Animation {
return this.from(prop, fromVal).to(prop, toVal); return this.from(prop, fromVal).to(prop, toVal, clearProperyAfterTransition);
} }
private _addProp(state: string, prop: string, val: string): Animation { private _addProp(state: string, prop: string, val: any): EffectProperty {
if (!this._fx[prop]) { var fxProp = this._fx[prop];
this._fx[prop] = {
trans: (TRANSFORMS.indexOf(prop) > -1)
}
if (this._fx[prop].trans) { if (!fxProp) {
this._fx[prop].wc = 'transform'; // first time we've see this EffectProperty
fxProp = this._fx[prop] = {
trans: (typeof TRANSFORMS[prop] !== 'undefined'),
wc: ''
};
// add the will-change property fo transforms or opacity
if (fxProp.trans) {
fxProp.wc = CSS.transform;
} else if (prop === 'opacity') { } else if (prop === 'opacity') {
this._fx[prop].wc = prop; fxProp.wc = prop;
} }
} }
var fx = this._fx[prop][state] = { // add from/to EffectState to the EffectProperty
var fxState = fxProp[state] = {
val: val, val: val,
num: null, num: null,
unit: '', unit: '',
@ -146,19 +178,19 @@ export class Animation {
let num = parseFloat(r[1]); let num = parseFloat(r[1]);
if (!isNaN(num)) { if (!isNaN(num)) {
fx.num = num; fxState.num = num;
} }
fx.unit = (r[0] != r[2] ? r[2] : ''); fxState.unit = (r[0] != r[2] ? r[2] : '');
} else if (typeof val === 'number') { } else if (typeof val === 'number') {
fx.num = val; fxState.num = val;
} }
return this; return fxProp;
} }
fadeIn(): Animation { fadeIn(): Animation {
return this.fromTo('opacity', 0.001, 1); return this.fromTo('opacity', 0.001, 1, true);
} }
fadeOut(): Animation { fadeOut(): Animation {
@ -178,6 +210,12 @@ export class Animation {
setStyles: (styles): Animation => { setStyles: (styles): Animation => {
this._bfSty = styles; this._bfSty = styles;
return this; return this;
},
clearStyles: (propertyNames: Array<string>) => {
for (var i = 0; i < propertyNames.length; i++) {
this._bfSty[propertyNames[i]] = '';
}
return this;
} }
} }
} }
@ -192,9 +230,15 @@ export class Animation {
this._afRmv.push(className); this._afRmv.push(className);
return this; return this;
}, },
setStyles: (styles): Animation => { setStyles: (styles: any): Animation => {
this._afSty = styles; this._afSty = styles;
return this; return this;
},
clearStyles: (propertyNames: Array<string>) => {
for (var i = 0; i < propertyNames.length; i++) {
this._afSty[propertyNames[i]] = '';
}
return this;
} }
} }
} }
@ -255,7 +299,7 @@ export class Animation {
// wait a few moments again to wait for the transition // wait a few moments again to wait for the transition
// info to take hold in the DOM // info to take hold in the DOM
raf(function() { rafFrames(2, function() {
// browser had some time to render everything in place // browser had some time to render everything in place
// and the transition duration/easing is set // and the transition duration/easing is set
// now set the TO properties // now set the TO properties
@ -347,7 +391,7 @@ export class Animation {
this._c[i]._progress(stepValue); this._c[i]._progress(stepValue);
} }
if (this._el) { if (this._el.length) {
// flip the number if we're going in reverse // flip the number if we're going in reverse
if (this._rv) { if (this._rv) {
stepValue = ((stepValue * -1) + 1); stepValue = ((stepValue * -1) + 1);
@ -355,42 +399,43 @@ export class Animation {
transforms = []; transforms = [];
for (prop in this._fx) { for (prop in this._fx) {
if (this._fx.hasOwnProperty(prop)) { fx = this._fx[prop];
fx = this._fx[prop];
if (fx.from && fx.to) { if (fx.from && fx.to) {
tweenEffect = (fx.from.num !== fx.to.num); tweenEffect = (fx.from.num !== fx.to.num);
if (tweenEffect) { if (tweenEffect) {
this.hasTween = true; this.hasTween = true;
} }
if (stepValue === 0) { if (stepValue === 0) {
// FROM // FROM
val = fx.from.val; val = fx.from.val;
} else if (stepValue === 1) { } else if (stepValue === 1) {
// TO // TO
val = fx.to.val; val = fx.to.val;
} else if (tweenEffect) { } else if (tweenEffect) {
// EVERYTHING IN BETWEEN // EVERYTHING IN BETWEEN
val = (((fx.to.num - fx.from.num) * stepValue) + fx.from.num) + fx.to.unit; val = (((fx.to.num - fx.from.num) * stepValue) + fx.from.num) + fx.to.unit;
} else {
val = null;
}
if (val !== null) {
if (fx.trans) {
transforms.push(prop + '(' + val + ')');
} else { } else {
val = null; for (i = 0; i < this._el.length; i++) {
} this._el[i].style[prop] = val;
if (val !== null) {
if (fx.trans) {
transforms.push(prop + '(' + val + ')');
} else {
this._el.style[prop] = val;
} }
} }
} }
} }
} }
// place all transforms on the same property // place all transforms on the same property
@ -401,27 +446,33 @@ export class Animation {
transforms.push('translateZ(0px)'); transforms.push('translateZ(0px)');
} }
this._el.style[CSS.transform] = transforms.join(' '); for (i = 0; i < this._el.length; i++) {
this._el[i].style[CSS.transform] = transforms.join(' ');
}
} }
} }
} }
_setTrans(duration: number, forcedLinearEasing) { _setTrans(duration: number, forcedLinearEasing: boolean) {
var i, easing;
// set the TRANSITION properties inline on the element // set the TRANSITION properties inline on the element
for (var i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._setTrans(duration, forcedLinearEasing); this._c[i]._setTrans(duration, forcedLinearEasing);
} }
if (this._el && Object.keys(this._fx).length) { if (Object.keys(this._fx).length) {
// all parent/child animations should have the same duration for (i = 0; i < this._el.length; i++) {
this._el.style[CSS.transitionDuration] = duration + 'ms'; // all parent/child animations should have the same duration
this._el[i].style[CSS.transitionDuration] = duration + 'ms';
// each animation can have a different easing // each animation can have a different easing
let easing = (forcedLinearEasing ? 'linear' : this.getEasing()); easing = (forcedLinearEasing ? 'linear' : this.getEasing());
if (easing) { if (easing) {
this._el.style[CSS.transitionTimingFn] = easing; this._el[i].style[CSS.transitionTimingFn] = easing;
}
} }
} }
} }
@ -434,20 +485,18 @@ export class Animation {
} }
if (this._wChg) { if (this._wChg) {
wc = [];
if (addWillChange) { if (addWillChange) {
wc = [];
for (prop in this._fx) { for (prop in this._fx) {
if (this._fx.hasOwnProperty(prop)) { if (this._fx[prop].wc !== '') {
if (this._fx[prop].wc !== '') { wc.push(this._fx[prop].wc);
wc.push(this._fx[prop].wc);
}
} }
} }
this._el.style['willChange'] = wc.join(','); }
} else { for (i = 0; i < this._el.length; i++) {
this._el.style['willChange'] = ''; this._el[i].style['willChange'] = wc.join(',');
} }
} }
} }
@ -455,28 +504,30 @@ export class Animation {
_before() { _before() {
// before the RENDER_DELAY // before the RENDER_DELAY
// before the animations have started // before the animations have started
var i, prop; var i, j, prop, ele;
// stage all of the child animations // stage all of the child animations
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._before(); this._c[i]._before();
} }
if (!this._rv && this._el) { if (!this._rv) {
// css classes to add before the animation for (i = 0; i < this._el.length; i++) {
for (i = 0; i < this._bfAdd.length; i++) { ele = this._el[i];
this._el.classList.add(this._bfAdd[i]);
}
// css classes to remove before the animation // css classes to add before the animation
for (i = 0; i < this._bfRmv.length; i++) { for (j = 0; j < this._bfAdd.length; j++) {
this._el.classList.remove(this._bfRmv[i]); ele.classList.add(this._bfAdd[j]);
} }
// inline styles to add before the animation // css classes to remove before the animation
for (prop in this._bfSty) { for (j = 0; j < this._bfRmv.length; j++) {
if (this._bfSty.hasOwnProperty(prop)) { ele.classList.remove(this._bfRmv[j]);
this._el.style[prop] = this._bfSty[prop]; }
// inline styles to add before the animation
for (prop in this._bfSty) {
ele.style[prop] = this._bfSty[prop];
} }
} }
} }
@ -484,55 +535,53 @@ export class Animation {
_after() { _after() {
// after the animations have finished // after the animations have finished
var i, prop; var i, j, prop, ele;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._after(); this._c[i]._after();
} }
if (this._el) { for (i = 0; i < this._el.length; i++) {
ele = this._el[i];
// remove the transition duration/easing // remove the transition duration/easing
this._el.style[CSS.transitionDuration] = ''; ele.style[CSS.transitionDuration] = '';
this._el.style[CSS.transitionTimingFn] = ''; ele.style[CSS.transitionTimingFn] = '';
if (this._rv) { if (this._rv) {
// finished in reverse direction // finished in reverse direction
// css classes that were added before the animation should be removed // css classes that were added before the animation should be removed
for (i = 0; i < this._bfAdd.length; i++) { for (j = 0; j < this._bfAdd.length; j++) {
this._el.classList.remove(this._bfAdd[i]); ele.classList.remove(this._bfAdd[j]);
} }
// css classes that were removed before the animation should be added // css classes that were removed before the animation should be added
for (i = 0; i < this._bfRmv.length; i++) { for (j = 0; j < this._bfRmv.length; j++) {
this._el.classList.add(this._bfRmv[i]); ele.classList.add(this._bfRmv[j]);
} }
// inline styles that were added before the animation should be removed // inline styles that were added before the animation should be removed
for (prop in this._bfSty) { for (prop in this._bfSty) {
if (this._bfSty.hasOwnProperty(prop)) { ele.style[prop] = '';
this._el.style[prop] = '';
}
} }
} else { } else {
// finished in forward direction // finished in forward direction
// css classes to add after the animation // css classes to add after the animation
for (i = 0; i < this._afAdd.length; i++) { for (j = 0; j < this._afAdd.length; j++) {
this._el.classList.add(this._afAdd[i]); ele.classList.add(this._afAdd[j]);
} }
// css classes to remove after the animation // css classes to remove after the animation
for (i = 0; i < this._afRmv.length; i++) { for (j = 0; j < this._afRmv.length; j++) {
this._el.classList.remove(this._afRmv[i]); ele.classList.remove(this._afRmv[j]);
} }
// inline styles to add after the animation // inline styles to add after the animation
for (prop in this._afSty) { for (prop in this._afSty) {
if (this._afSty.hasOwnProperty(prop)) { ele.style[prop] = this._afSty[prop];
this._el.style[prop] = this._afSty[prop];
}
} }
} }
} }
@ -560,6 +609,7 @@ export class Animation {
if (this._rv) { if (this._rv) {
stepValue = ((stepValue * -1) + 1); stepValue = ((stepValue * -1) + 1);
} }
this._progress(stepValue); this._progress(stepValue);
} }
@ -592,12 +642,12 @@ export class Animation {
} }
} }
onPlay(callback: Function) { onPlay(callback: Function): Animation {
this._pFns.push(callback); this._pFns.push(callback);
return this; return this;
} }
onFinish(callback: Function, onceTimeCallback: boolean = false, clearOnFinishCallacks: boolean = false) { onFinish(callback: Function, onceTimeCallback: boolean = false, clearOnFinishCallacks: boolean = false): Animation {
if (clearOnFinishCallacks) { if (clearOnFinishCallacks) {
this._fFns = []; this._fFns = [];
this._fOnceFns = []; this._fOnceFns = [];
@ -624,7 +674,7 @@ export class Animation {
this._fOnceFns = []; this._fOnceFns = [];
} }
reverse(shouldReverse: boolean = true) { reverse(shouldReverse: boolean = true): Animation {
for (var i = 0; i < this._c.length; i++) { for (var i = 0; i < this._c.length; i++) {
this._c[i].reverse(shouldReverse); this._c[i].reverse(shouldReverse);
} }
@ -633,12 +683,17 @@ export class Animation {
} }
destroy(removeElement?: boolean) { destroy(removeElement?: boolean) {
for (var i = 0; i < this._c.length; i++) { var i, ele;
for (i = 0; i < this._c.length; i++) {
this._c[i].destroy(removeElement); this._c[i].destroy(removeElement);
} }
if (removeElement && this._el) { if (removeElement) {
this._el.parentNode && this._el.parentNode.removeChild(this._el); for (i = 0; i < this._el.length; i++) {
ele = this._el[i];
ele.parentNode && ele.parentNode.removeChild(ele);
}
} }
this._reset(); this._reset();
@ -646,7 +701,7 @@ export class Animation {
_transEl(): HTMLElement { _transEl(): HTMLElement {
// get the lowest level element that has an Animation // get the lowest level element that has an Animation
var targetEl, i; var i, targetEl;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
targetEl = this._c[i]._transEl(); targetEl = this._c[i]._transEl();
@ -655,7 +710,7 @@ export class Animation {
} }
} }
return (this.hasTween ? this._el : null); return (this.hasTween && this._el.length ? this._el[0] : null);
} }
/* /*
@ -688,9 +743,26 @@ export interface PlayOptions {
stepValue?: number; stepValue?: number;
} }
interface EffectProperty {
trans: boolean;
wc: string;
to?: EffectState;
from?: EffectState;
}
interface EffectState {
val: any;
num: number;
unit: string;
}
const doc: any = document; const doc: any = document;
const TRANSFORMS = [
'translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', const TRANSFORMS = {
'rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'perspective']; 'translateX':1, 'translateY':1, 'translateZ':1,
'scale':1, 'scaleX':1, 'scaleY':1, 'scaleZ':1,
'rotate':1, 'rotateX':1, 'rotateY':1, 'rotateZ':1,
'skewX':1, 'skewY':1, 'perspective':1
};
let AnimationRegistry = {}; let AnimationRegistry = {};

1
ionic/components/app/structure.scss
View File

@ -113,7 +113,6 @@ ion-page {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translateZ(0);
&.show-page { &.show-page {
display: flex; display: flex;

2
ionic/config/modes.ts
View File

@ -50,7 +50,7 @@ Config.setModeConfig('md', {
modalLeave: 'modal-md-slide-out', modalLeave: 'modal-md-slide-out',
pageTransition: 'md-transition', pageTransition: 'md-transition',
pageTransitionDelay: 120, pageTransitionDelay: 96,
tabbarHighlight: true, tabbarHighlight: true,
tabbarPlacement: 'top', tabbarPlacement: 'top',

28
ionic/transitions/transition-ios.ts
View File

@ -39,14 +39,14 @@ class IOSTransition extends Transition {
if (backDirection) { if (backDirection) {
// entering content, back direction // entering content, back direction
enteringContent enteringContent
.fromTo(TRANSLATEX, OFF_LEFT, CENTER) .fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
.fromTo(OPACITY, OFF_OPACITY, 1); .fromTo(OPACITY, OFF_OPACITY, 1, true);
} else { } else {
// entering content, forward direction // entering content, forward direction
enteringContent enteringContent
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER) .before.clearStyles([OPACITY])
.fromTo(OPACITY, 1, 1); .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
} }
if (enteringHasNavbar) { if (enteringHasNavbar) {
@ -71,7 +71,7 @@ class IOSTransition extends Transition {
// set properties depending on direction // set properties depending on direction
if (backDirection) { if (backDirection) {
// entering navbar, back direction // entering navbar, back direction
enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER); enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
if (enteringView.enableBack()) { if (enteringView.enableBack()) {
// back direction, entering page has a back button // back direction, entering page has a back button
@ -82,21 +82,21 @@ class IOSTransition extends Transition {
} else { } else {
// entering navbar, forward direction // entering navbar, forward direction
enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER); enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
if (leavingHasNavbar) { if (leavingHasNavbar) {
// entering navbar, forward direction, and there's a leaving navbar // entering navbar, forward direction, and there's a leaving navbar
// should just fade in, no sliding // should just fade in, no sliding
enteringNavbarBg enteringNavbarBg
.fromTo(TRANSLATEX, CENTER, CENTER) .before.clearStyles([TRANSLATEX])
.fadeIn(); .fadeIn();
} else { } else {
// entering navbar, forward direction, and there's no leaving navbar // entering navbar, forward direction, and there's no leaving navbar
// should just slide in, no fading in // should just slide in, no fading in
enteringNavbarBg enteringNavbarBg
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER) .before.clearStyles([OPACITY])
.fromTo(OPACITY, 1, 1); .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
} }
@ -125,8 +125,8 @@ class IOSTransition extends Transition {
if (backDirection) { if (backDirection) {
// leaving content, back direction // leaving content, back direction
leavingContent leavingContent
.fromTo(TRANSLATEX, CENTER, '100%') .before.clearStyles([OPACITY])
.fromTo(OPACITY, 1, 1); .fromTo(TRANSLATEX, CENTER, '100%');
} else { } else {
// leaving content, forward direction // leaving content, forward direction
@ -163,15 +163,15 @@ class IOSTransition extends Transition {
// leaving navbar, back direction, and there's an entering navbar // leaving navbar, back direction, and there's an entering navbar
// should just fade out, no sliding // should just fade out, no sliding
leavingNavbarBg leavingNavbarBg
.fromTo(TRANSLATEX, CENTER, CENTER) .before.clearStyles([TRANSLATEX])
.fadeOut(); .fadeOut();
} else { } else {
// leaving navbar, back direction, and there's no entering navbar // leaving navbar, back direction, and there's no entering navbar
// should just slide out, no fading out // should just slide out, no fading out
leavingNavbarBg leavingNavbarBg
.fromTo(TRANSLATEX, CENTER, '100%') .before.clearStyles([OPACITY])
.fromTo(OPACITY, 1, 1); .fromTo(TRANSLATEX, CENTER, '100%');
} }
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef()); let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());

4
ionic/transitions/transition-md.ts
View File

@ -27,12 +27,12 @@ class MDTransition extends Transition {
if (backDirection) { if (backDirection) {
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)'); this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
enteringPage.fromTo(TRANSLATEY, CENTER, CENTER); enteringPage.before.clearStyles([TRANSLATEY]);
} else { } else {
this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)'); this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
enteringPage enteringPage
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER) .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
.fadeIn(); .fadeIn();
} }