feat(animation): init ionic animations

packages/core/src/animations/constants.ts

@@ -0,0 +1,66 @@
+
+export var CSS_PROP = function(docEle: HTMLElement) {
+  var css: {
+    transformProp?: string;
+    transitionProp?: string;
+    transitionDurationProp?: string;
+    transitionTimingFnProp?: string;
+  } = {};
+
+  // transform
+  var i: number;
+  var keys = ['webkitTransform', '-webkit-transform', 'webkit-transform', 'transform'];
+
+  for (i = 0; i < keys.length; i++) {
+    if ((<any>docEle.style)[keys[i]] !== undefined) {
+      css.transformProp = keys[i];
+      break;
+    }
+  }
+
+  // transition
+  keys = ['webkitTransition', 'transition'];
+  for (i = 0; i < keys.length; i++) {
+    if ((<any>docEle.style)[keys[i]] !== undefined) {
+      css.transitionProp = keys[i];
+      break;
+    }
+  }
+
+  // The only prefix we care about is webkit for transitions.
+  var prefix = css.transitionProp.indexOf('webkit') > -1 ? '-webkit-' : '';
+
+  // transition duration
+  css.transitionDurationProp = prefix + 'transition-duration';
+
+  // transition timing function
+  css.transitionTimingFnProp = prefix + 'transition-timing-function';
+
+  return css;
+
+}(document.documentElement);
+
+
+export var TRANSFORM_PROPS: {[key: string]: number} = {
+  '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
+};
+
+export var CSS_VALUE_REGEX = /(^-?\d*\.?\d*)(.*)/;
+export var DURATION_MIN = 32;
+export var TRANSITION_END_FALLBACK_PADDING_MS = 400;

packages/core/src/animations/interfaces.ts

@@ -0,0 +1,70 @@
+
+export interface Animation {
+  new(elm?: Node|Node[]|NodeList): Animation;
+  add: (childAnimation: Animation) => Animation;
+  addElement: (elm: Node|Node[]|NodeList) => Animation;
+  afterAddClass: (className: string) => Animation;
+  afterClearStyles: (propertyNames: string[]) => Animation;
+  afterRemoveClass: (className: string) => Animation;
+  afterStyles: (styles: { [property: string]: any; }) => Animation;
+  beforeAddClass: (className: string) => Animation;
+  beforeClearStyles: (propertyNames: string[]) => Animation;
+  beforeRemoveClass: (className: string) => Animation;
+  beforeStyles: (styles: { [property: string]: any; }) => Animation;
+  destroy: () => void;
+  duration: (milliseconds: number) => Animation;
+  getDuration(opts?: PlayOptions): number;
+  easing: (name: string) => Animation;
+  easingReverse: (name: string) => Animation;
+  from: (prop: string, val: any) => Animation;
+  fromTo: (prop: string, fromVal: any, toVal: any, clearProperyAfterTransition?: boolean) => Animation;
+  hasCompleted: boolean;
+  isPlaying: boolean;
+  onFinish: (callback: (animation: Animation) => void, opts?: {oneTimeCallback?: boolean, clearExistingCallacks?: boolean}) => Animation;
+  play: (opts?: PlayOptions) => void;
+  syncPlay: () => void;
+  progressEnd: (shouldComplete: boolean, currentStepValue: number, dur: number) => void;
+  progressStep: (stepValue: number) => void;
+  progressStart: () => void;
+  reverse: (shouldReverse?: boolean) => Animation;
+  stop: (stepValue?: number) => void;
+  to: (prop: string, val: any, clearProperyAfterTransition?: boolean) => Animation;
+}
+
+
+export interface AnimationBuilder {
+  (elm?: HTMLElement): Animation;
+}
+
+
+export interface AnimationOptions {
+  animation?: string;
+  duration?: number;
+  easing?: string;
+  direction?: string;
+  isRTL?: boolean;
+  ev?: any;
+}
+
+
+export interface PlayOptions {
+  duration?: number;
+  promise?: boolean;
+}
+
+
+export interface EffectProperty {
+  effectName: string;
+  trans: boolean;
+  wc?: string;
+  to?: EffectState;
+  from?: EffectState;
+  [state: string]: any;
+}
+
+
+export interface EffectState {
+  val: any;
+  num: number;
+  effectUnit: string;
+}

packages/core/src/animations/transition-end.ts

@@ -0,0 +1,33 @@
+
+
+export function transitionEnd(elm: HTMLElement, callback: {(ev?: TransitionEvent): void}) {
+  var unRegTrans: Function;
+  var unRegWKTrans: Function;
+  var opts: any = { passive: true };
+
+  function unregister() {
+    unRegWKTrans && unRegWKTrans();
+    unRegWKTrans && unRegTrans();
+  }
+
+  function onTransitionEnd(ev: TransitionEvent) {
+    if (elm === ev.target) {
+      unregister();
+      callback(ev);
+    }
+  }
+
+  if (elm) {
+    elm.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    unRegWKTrans = function() {
+      elm.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    };
+
+    elm.addEventListener('transitionend', onTransitionEnd, opts);
+    unRegWKTrans = function() {
+      elm.removeEventListener('transitionend', onTransitionEnd, opts);
+    };
+  }
+
+  return unregister;
+}