remove future features for now

public/docs/_examples/animations/ts/app/hero-list-classes.component.ts

@@ -1,45 +0,0 @@
-import {
-  Component,
-  Input,
-  trigger,
-  state,
-  style,
-  animate,
-  transition
-} from '@angular/core';
-import { Heroes } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-list-classes',
-  template: `
-    <ul>
-      <li *ngFor="let hero of heroes"
-          @heroState="hero.state"
-          (click)="hero.toggleState()">
-        {{hero.name}}
-      </li>
-    </ul>
-  `,
-  styleUrls: ['hero-list.component.css'],
-  /**
-   * Define two states, "inactive" and "active", and make it so
-   * that the styles for those states are pulled in from the
-   * component stylesheet using CSS classes inactive and active.
-   * Then define animations for transitioning between the states,
-   * one in each direction
-   */
-  // #docregion animationdef
-  animations: [
-    trigger('heroState', [
-      state('inactive', style('.inactive')),
-      state('active', style('.active')),
-      transition('inactive => active', animate(100)),
-      transition('active => inactive', animate(100))
-    ])
-  ]
-  // #enddocregion animationdef
-})
-export class HeroListClassesComponent {
-  @Input() heroes: Heroes;
-}

public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts

@@ -1,64 +0,0 @@
-/* tslint:disable */
-import {
-  Component,
-  Input,
-  trigger,
-  state,
-  style,
-  keyframes,
-  animate,
-  transition,
-  group
-} from '@angular/core';
-import { Heroes } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-list-keyframes',
-  template: `
-    <ul>
-      <li *ngFor="let hero of heroes"
-          @flyInOut="'in'">
-        {{hero.name}}
-      </li>
-    </ul>
-  `,
-  styleUrls: ['hero-list.component.css'],
-  /* The element here always has the state "in" when it
-   * is present. We animate two transitions: From void
-   * to in and from in to void, to achieve an animated
-   * enter and leave transition. The actual animations
-   * are defined as CSS keyframes in the component
-   * stylesheet. They are pulled into the transition
-   * configuration using the keyframes() function.
-   */
-  // #docregion animationdef
-  styles: [`
-    @keyframes flyIn {
-      0%   { opacity: 0; transform: translateX(-100%); }
-      30%  { opacity: 1; transform: translateX(15px); }
-      100% { opacity: 1; transform: translateX(0); }
-    }
-    @keyframes flyOut {
-      0%   { opacity: 1; transform: translateX(0); }
-      70%  { opacity: 1; transform: translateX(-15px); }
-      100% { opacity: 1; transform: translateX(100%); }
-    }
-  `],
-  animations: [
-    trigger('flyInOut', [
-      transition('void => *', [
-        // Enable when CSS parser integration has been added
-        // animate(300, keyframes('flyIn'))
-      ]),
-      transition('* => void', [
-        // Enable when CSS parser integration has been added
-        // animate(300, keyframes('flyOut'))
-      ])
-    ])
-  ]
-  // #enddocregion animationdef
-})
-export class HeroListKeyframesComponent {
-  @Input() heroes: Heroes;
-}

public/docs/_examples/animations/ts/app/hero-team-builder.component.ts

@@ -7,11 +7,7 @@ import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-state
 import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
 import { HeroListTwowayComponent } from './hero-list-twoway.component';
 import { HeroListAutoComponent } from './hero-list-auto.component';
-// Enable when CSS parser integration has been added
-// import {HeroListClassesComponent} from './hero-list-classes.component';
 import { HeroListGroupsComponent } from './hero-list-groups.component';
-// Enable when CSS parser integration has been added
-// import {HeroListKeyframesComponent} from './hero-list-keyframes.component';
 import { HeroListMultistepComponent } from './hero-list-multistep.component';
 import { HeroListTimingsComponent } from './hero-list-timings.component';
 
@@ -78,20 +74,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
         <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
         <hero-list-groups [heroes]=heroes></hero-list-groups>
       </div>
-      <!--div class="column">
-        <h4>CSS Classes</h4>
-        <p>Switch between active/inactive on click. Pull the actual CSS styles in from component stylesheet.</p>
-        <hero-list-classes [heroes]=heroes></hero-list-classes>
-      </div-->
-      <!--div class="column">
-        <h4>CSS Keyframes</h4>
-        <p>
-          Enter and leave animations with three keyframes in each, to give the transition some bounce.
-          Pull in the actual keyframes from CSS keyframes in component stylesheet.
-        </p>
-        <hero-list-multistep [heroes]=heroes></hero-list-multistep>
-        <hero-list-keyframes [heroes]=heroes></hero-list-keyframes>
-      </div-->
     </div>
   `,
   styles: [`
@@ -122,8 +104,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
     HeroListEnterLeaveStatesComponent,
     HeroListAutoComponent,
     HeroListTimingsComponent,
-    // HeroListClassesComponent,
-    // HeroListKeyframesComponent,
     HeroListMultistepComponent,
     HeroListGroupsComponent
   ],

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

@@ -244,21 +244,6 @@ figure
 
 +makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".")
 
-// Uncomment when the support is added and example works
-  :marked
-    ## Accessing Styles from Component Stylesheets
-
-    In our examples so far we have specified all animated styles right in the
-    animation metadata. This is usually not what we want to do in anything
-    but the simplest animations. What we prefer to do instead is define all styles
-    in [component stylesheets](component-styles.html) and then just pull them into
-    the animations.
-
-    We can do this simply by referencing the classes from the `style()` metadata
-    in the animations using the `.class` selector notation:
-
-  +makeExample('animations/ts/src/hero-list-classes.component.ts', 'animationdef')(format=".")
-
 :marked
   ## Animation Timing
 
@@ -332,21 +317,6 @@ figure
   spacing are automatically assigned. For example, three keyframes without predefined
   offsets will receive offsets `0`, `0.5`, and `1`.
 
-// Uncomment when the support is added and example works
-  :marked
-    ## Using Stylesheet Keyframes
-
-    Earlier we saw how we can put animation styles into component stylesheets and then
-    pull them into our animations. The same trick can be applied to keyframes: We can
-    define the relative timeline of the animation with CSS
-    [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)
-    and then reference it from the stylesheets.
-
-    In this example we define the same animations as we had in the previous section,
-    but this time using CSS keyframes:
-
-  +makeExample('animations/ts/src/hero-list-keyframes.component.ts', 'animationdef')(format=".")
-
 :marked
   ## Parallel Animation Groups
 figure