docs(router): Added transition aliases for route animations

Author: brandonroberts

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -35,14 +35,14 @@ import { DialogService }          from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -34,14 +34,14 @@ import { DialogService }  from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -34,14 +34,14 @@ import { Hero, HeroService }  from './hero.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/ts/latest/guide/router.jade

@@ -1142,8 +1142,8 @@ h3#route-animation Adding animations to the route component
 :marked
   Next, we'll use a **host binding** for route animations named *@routeAnimation*. There is nothing special
   about the choice of the binding name, but since we are controlling route animation, we'll go with `routeAnimation`.
-  The binding value is set to `true` because we only care about the `*` and `void` states which are
-  [entering and leaving](../guide/animations.html#example-entering-and-leaving) animation states.
+  The binding value is set to `true` because we only care about the `:enter` and `:leave` states which are
+  [entering and leaving](../api/core/index/transition-function.html#transition-aliases-enter-and-leave-) transition aliases.
 
   We'll also add some display and positioning bindings for styling.
 
@@ -1152,8 +1152,8 @@ h3#route-animation Adding animations to the route component
 :marked
   Now we can build our animation trigger, which we'll call *routeAnimation* to match the binding we previously
   setup. We'll use the **wildcard state** that matches any animation state our route component is in, along with
-  two *transitions*. One transition animates the component as it enters the application view (`void => *`), while the other
-  animates the component as it leaves the application view (`* => void`).
+  two *transitions*. One transition animates the component as it enters the application view (`:enter`), while the other
+  animates the component as it leaves the application view (`:leave`).
 
   We could add different transitions to different route components depending on our needs. We'll just animate our `HeroDetailComponent` for this milestone.
 
@@ -2199,7 +2199,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 
 <a id="custom-preloading"></a>
 :marked
-  ### Custom Pre-Loading
+  ### Custom Pre-Loading Strategy
 
   Pre-loading all modules works well in some situations, but in some cases we need more control over what gets loaded eagerly. This becomes more clear
   as we load our application on a mobile device, or a low bandwidth connection. We may only want to preload certain feature modules based on user metrics
@@ -2236,9 +2236,8 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 +makeExcerpt('app/admin/admin-dashboard.component.ts (preloaded modules)', '')
 
 :marked
-  Once our application is loaded to our inital route, the *CrisisCenterModule* is loaded eagerly. We can verify this by logging in to the `Admin` feature area and
-  noting that our `Crisis Center` is listed in the `Preloaded Modules.`
-
+  Once our application is loaded to our initial route, the *CrisisCenterModule* is loaded eagerly. We can verify this by logging in to the `Admin` feature area and
+  noting that our `Crisis Center` is listed in the `Preloaded Modules`. We can continue to add feature modules to be selectively loaded eagerly.
 
 
 <a id="final-app"></a>