feat(animations): support styling of the default animation state

It is now possible to set a fallback state that will apply its
styling when the destination state is not detected.

```ts
state("*", style({ ... }))
```

Closes #9013

modules/@angular/compiler-cli/integrationtest/src/animate.ts

@@ -1,19 +1,21 @@
-import {Component, trigger, state, animate, transition, style} from '@angular/core';
+import {AUTO_STYLE, Component, trigger, state, animate, transition, style} from '@angular/core';
 
 @Component({
   selector: "animate-cmp",
   animations: [
     trigger('openClose', [
+      state("*", style({ height: AUTO_STYLE, color: 'black', borderColor: 'black' })),
       state('closed, void',
         style({ height:"0px", color: "maroon", borderColor: "maroon" })),
       state('open',
-        style({ height:"*", borderColor:"green", color:"green" })),
+        style({ height: AUTO_STYLE, borderColor:"green", color:"green" })),
       transition("* => *", animate(500))
     ])
   ],
   template: `
     <button (click)="setAsOpen()">Open</button>
     <button (click)="setAsClosed()">Closed</button>
+    <button (click)="setAsSomethingElse()">Something Else</button>
     <hr />
     <div @openClose="stateExpression">
       Look at this box
@@ -25,6 +27,9 @@ export class AnimateCmp {
   constructor() {
     this.setAsClosed();
   }
+  setAsSomethingElse() {
+    this.stateExpression = 'something';
+  }
   setAsOpen() {
     this.stateExpression = 'open';
   }

modules/@angular/compiler-cli/integrationtest/test/animate_spec.ts

@@ -8,15 +8,19 @@ import {AUTO_STYLE, ReflectiveInjector, DebugElement, getDebugNode} from '@angul
 import {browserPlatform, BROWSER_APP_PROVIDERS} from '@angular/platform-browser';
 
 describe("template codegen output", () => {
+  function findTargetElement(elm: DebugElement): DebugElement {
+    // the open-close-container is a child of the main container
+    // if the template changes then please update the location below
+    return elm.children[4];
+  }
+
   it("should apply the animate states to the element", (done) => {
     const appInjector = ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS,
       browserPlatform().injector);
     var comp = AnimateCmpNgFactory.create(appInjector);
     var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
 
-    // the open-close-container is a child of the main container
-    // if the template changes then please update the location below
-    var targetDebugElement = <DebugElement>debugElement.children[3];
+    var targetDebugElement = findTargetElement(<DebugElement>debugElement);
 
     comp.instance.setAsOpen();
     comp.changeDetectorRef.detectChanges();
@@ -37,4 +41,32 @@ describe("template codegen output", () => {
       }, 0);
     }, 0);
   });
+
+  it("should apply the default animate state to the element", (done) => {
+    const appInjector = ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS,
+      browserPlatform().injector);
+    var comp = AnimateCmpNgFactory.create(appInjector);
+    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+
+    var targetDebugElement = findTargetElement(<DebugElement>debugElement);
+
+    comp.instance.setAsSomethingElse();
+    comp.changeDetectorRef.detectChanges();
+
+    setTimeout(() => {
+      expect(targetDebugElement.styles['height']).toEqual(AUTO_STYLE);
+      expect(targetDebugElement.styles['borderColor']).toEqual('black');
+      expect(targetDebugElement.styles['color']).toEqual('black');
+
+      comp.instance.setAsClosed();
+      comp.changeDetectorRef.detectChanges();
+
+      setTimeout(() => {
+        expect(targetDebugElement.styles['height']).not.toEqual(AUTO_STYLE);
+        expect(targetDebugElement.styles['borderColor']).not.toEqual('grey');
+        expect(targetDebugElement.styles['color']).not.toEqual('grey');
+        done();
+      }, 0);
+    }, 0);
+  });
 });