feat(animate): adds basic support for CSS animations on enter and leave

Closes #3876

modules/angular2/src/core/dom/browser_adapter.dart

@@ -451,6 +451,8 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
     return element.dataset[name];
   }
 
+  getComputedStyle(elem) => elem.getComputedStyle();
+
   // TODO(tbosch): move this into a separate environment class once we have it
   setGlobalVar(String path, value) {
     var parts = path.split('.');
@@ -465,6 +467,14 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
     }
     obj[parts.removeAt(0)] = value;
   }
+
+  requestAnimationFrame(callback) {
+    return window.requestAnimationFrame(callback);
+  }
+
+  cancelAnimationFrame(id) {
+    window.cancelAnimationFrame(id);
+  }
 }
 
 var baseElement = null;

modules/angular2/src/core/dom/browser_adapter.ts

@@ -317,8 +317,11 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     this.setAttribute(element, 'data-' + name, value);
   }
   getData(element, name: string): string { return this.getAttribute(element, 'data-' + name); }
+  getComputedStyle(element): any { return getComputedStyle(element); }
   // TODO(tbosch): move this into a separate environment class once we have it
   setGlobalVar(path: string, value: any) { setValueOnPath(global, path, value); }
+  requestAnimationFrame(callback): number { return window.requestAnimationFrame(callback); }
+  cancelAnimationFrame(id: number) { window.cancelAnimationFrame(id); }
 }
 
 

modules/angular2/src/core/dom/dom_adapter.ts

@@ -133,6 +133,9 @@ export class DomAdapter {
   resetBaseElement(): void { throw _abstract(); }
   getUserAgent(): string { throw _abstract(); }
   setData(element, name: string, value: string) { throw _abstract(); }
+  getComputedStyle(element): any { throw _abstract(); }
   getData(element, name: string): string { throw _abstract(); }
   setGlobalVar(name: string, value: any) { throw _abstract(); }
+  requestAnimationFrame(callback): number { throw _abstract(); }
+  cancelAnimationFrame(id) { throw _abstract(); }
 }

modules/angular2/src/core/dom/html_adapter.dart

@@ -412,6 +412,10 @@ class Html5LibDomAdapter implements DomAdapter {
     this.setAttribute(element, 'data-${name}', value);
   }
 
+  getComputedStyle(element) {
+    throw 'not implemented';
+  }
+
   String getData(Element element, String name) {
     return this.getAttribute(element, 'data-${name}');
   }
@@ -420,4 +424,11 @@ class Html5LibDomAdapter implements DomAdapter {
   setGlobalVar(String name, value) {
     // noop on the server
   }
+
+  requestAnimationFrame(callback) {
+    throw 'not implemented';
+  }
+  cancelAnimationFrame(id) {
+    throw 'not implemented';
+  }
 }

modules/angular2/src/core/dom/parse5_adapter.ts

@@ -539,9 +539,12 @@ export class Parse5DomAdapter extends DomAdapter {
   getLocation(): Location { throw 'not implemented'; }
   getUserAgent(): string { return "Fake user agent"; }
   getData(el, name: string): string { return this.getAttribute(el, 'data-' + name); }
+  getComputedStyle(el): any { throw 'not implemented'; }
   setData(el, name: string, value: string) { this.setAttribute(el, 'data-' + name, value); }
   // TODO(tbosch): move this into a separate environment class once we have it
   setGlobalVar(path: string, value: any) { setValueOnPath(global, path, value); }
+  requestAnimationFrame(callback): number { return setTimeout(callback, 0); }
+  cancelAnimationFrame(id: number) { clearTimeout(id); }
 }
 
 // TODO: build a proper list, this one is all the keys of a HTMLInputElement