From 8664463c3abd5915d942065f1f7499a04a533828 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Tue, 14 Jun 2016 17:49:38 +0200 Subject: [PATCH] remove future features for now --- .../ts/app/hero-list-classes.component.ts | 45 ------------- .../ts/app/hero-list-keyframes.component.ts | 64 ------------------- .../ts/app/hero-team-builder.component.ts | 20 ------ public/docs/ts/latest/guide/animations.jade | 30 --------- 4 files changed, 159 deletions(-) delete mode 100644 public/docs/_examples/animations/ts/app/hero-list-classes.component.ts delete mode 100644 public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts diff --git a/public/docs/_examples/animations/ts/app/hero-list-classes.component.ts b/public/docs/_examples/animations/ts/app/hero-list-classes.component.ts deleted file mode 100644 index 459cd3c651..0000000000 --- a/public/docs/_examples/animations/ts/app/hero-list-classes.component.ts +++ /dev/null @@ -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: ` - - `, - 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; -} diff --git a/public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts b/public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts deleted file mode 100644 index 38a580b40f..0000000000 --- a/public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts +++ /dev/null @@ -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: ` - - `, - 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; -} diff --git a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts index 40ff07ba68..3673d9acea 100644 --- a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts +++ b/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';

Enter and leave animations with multiple properties animated in parallel with different timings.

- - `, styles: [` @@ -122,8 +104,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component'; HeroListEnterLeaveStatesComponent, HeroListAutoComponent, HeroListTimingsComponent, - // HeroListClassesComponent, - // HeroListKeyframesComponent, HeroListMultistepComponent, HeroListGroupsComponent ], diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index efef40378b..4bf6fe2be6 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/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