remove future features for now
This commit is contained in:
Foxandxss
Naomi Black
parent
34447904b9
commit
8664463c3a
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue