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

refactor(animation): move constants

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-07-29 23:28:13 +02:00
parent c1b61d0fee
commit d1fd1c5276
2 changed files with 14 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/animation-controller/animator.tsx
View File

@ -1,7 +1,10 @@
import { EffectProperty, EffectState, PlayOptions } from './animation-interface'; import { EffectProperty, EffectState, PlayOptions } from './animation-interface';
import { CSS_PROP, CSS_VALUE_REGEX, DURATION_MIN, TRANSITION_END_FALLBACK_PADDING_MS } from './constants';
import { transitionEnd } from './transition-end'; import { transitionEnd } from './transition-end';
export const CSS_VALUE_REGEX = /(^-?\d*\.?\d*)(.*)/;
export const DURATION_MIN = 32;
export const TRANSITION_END_FALLBACK_PADDING_MS = 400;
export const TRANSFORM_PROPS: {[key: string]: number} = { export const TRANSFORM_PROPS: {[key: string]: number} = {
'translateX': 1, 'translateX': 1,
'translateY': 1, 'translateY': 1,
@ -162,7 +165,7 @@ export class Animator {
if (clearProperyAfterTransition) { if (clearProperyAfterTransition) {
// if this effect is a transform then clear the transform effect // if this effect is a transform then clear the transform effect
// otherwise just clear the actual property // otherwise just clear the actual property
this.afterClearStyles([ fx.trans ? CSS_PROP.transformProp : prop]); this.afterClearStyles([ fx.trans ? 'transform' : prop]);
} }
return this; return this;
@ -197,7 +200,7 @@ export class Animator {
trans: shouldTrans, trans: shouldTrans,
// add the will-change property for transforms or opacity // add the will-change property for transforms or opacity
wc: (shouldTrans ? CSS_PROP.transformProp : prop) wc: (shouldTrans ? 'transform' : prop)
} as EffectProperty; } as EffectProperty;
(this._fxProperties = this._fxProperties || []).push(fxProp); (this._fxProperties = this._fxProperties || []).push(fxProp);
} }
@ -618,7 +621,7 @@ export class Animator {
* RECURSION * RECURSION
*/ */
_hasDomReads() { _hasDomReads() {
if (this._readCallbacks && this._readCallbacks.length) { if (this._readCallbacks && this._readCallbacks.length > 0) {
return true; return true;
} }
@ -733,7 +736,7 @@ export class Animator {
for (i = 0; i < elements.length; i++) { for (i = 0; i < elements.length; i++) {
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
(elements[i].style as any)[CSS_PROP.transformProp] = finalTransform; elements[i].style.setProperty('transform', finalTransform);
} }
} }
} }
@ -752,25 +755,21 @@ export class Animator {
// set the TRANSITION properties inline on the element // set the TRANSITION properties inline on the element
const easing = (forcedLinearEasing ? 'linear' : this.getEasing()); const easing = (forcedLinearEasing ? 'linear' : this.getEasing());
const durString = dur + 'ms'; const durString = dur + 'ms';
const cssTransform = CSS_PROP.transitionProp;
const cssTransitionDuration = CSS_PROP.transitionDurationProp;
const cssTransitionTimingFn = CSS_PROP.transitionTimingFnProp;
let eleStyle: any;
for (let i = 0; i < elements.length; i++) { for (let i = 0; i < elements.length; i++) {
eleStyle = elements[i].style; const eleStyle = elements[i].style;
if (dur > 0) { if (dur > 0) {
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
eleStyle[cssTransform] = ''; eleStyle.transform = '';
eleStyle[cssTransitionDuration] = durString; eleStyle.transitionDuration = durString;
// each animation can have a different easing // each animation can have a different easing
if (easing) { if (easing) {
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
eleStyle[cssTransitionTimingFn] = easing; eleStyle.transitionTimingFunction = easing;
} }
} else { } else {
eleStyle[cssTransform] = 'none'; eleStyle.transform = 'none';
} }
} }
} }
@ -907,7 +906,7 @@ export class Animator {
// remove the transition duration/easing // remove the transition duration/easing
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
(el as any).style[CSS_PROP.transitionDurationProp] = (el as any).style[CSS_PROP.transitionTimingFnProp] = ''; el.style.transitionDuration = el.style.transitionTimingFunction = '';
if (this._isReverse) { if (this._isReverse) {
// finished in reverse direction // finished in reverse direction

31
core/src/components/animation-controller/constants.ts
View File

@ -1,31 +0,0 @@
// tslint:disable-next-line:only-arrow-functions
export const CSS_PROP = function(docEle: HTMLElement) {
// transform
const transformProp = [
'webkitTransform',
'-webkit-transform',
'webkit-transform',
'transform'
].find(key => (docEle.style as any)[key] !== undefined) || 'transform';
const transitionProp = [
'webkitTransition',
'transition'
].find(key => (docEle.style as any)[key] !== undefined) || 'transition';
// The only prefix we care about is webkit for transitions.
const prefix = transitionProp.indexOf('webkit') > -1 ? '-webkit-' : '';
return {
transitionDurationProp: prefix + 'transition-duration',
transitionTimingFnProp: prefix + 'transition-timing-function',
transformProp,
transitionProp
};
}(document.documentElement);
export const CSS_VALUE_REGEX = /(^-?\d*\.?\d*)(.*)/;
export const DURATION_MIN = 32;
export const TRANSITION_END_FALLBACK_PADDING_MS = 400;