docs: fix the code sample displayed in the "reusable animations" guide (#37262)
Currently the code sample displayed in this guide is not a valid. The `trigger` is directly used in the `@Component` decorator. It should instead be in the `animations` array of the `@Component` decorator. PR Close #37262
This commit is contained in:
parent
d39d64c15d
commit
29298f4f3d
@ -1,29 +1,12 @@
|
|||||||
// #docplaster
|
// #docplaster
|
||||||
// #docregion reusable
|
// #docregion reusable
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
|
import { transition, trigger, useAnimation } from '@angular/animations';
|
||||||
import { transAnimation } from './animations';
|
import { transAnimation } from './animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
// #enddocregion reusable
|
|
||||||
selector: 'app-open-close-reusable',
|
selector: 'app-open-close-reusable',
|
||||||
// #docregion runtime
|
|
||||||
animations: [
|
animations: [
|
||||||
transition('open => closed', [
|
|
||||||
style({
|
|
||||||
height: '200 px',
|
|
||||||
opacity: '{{ opacity }}',
|
|
||||||
backgroundcolor: 'yelow'
|
|
||||||
}),
|
|
||||||
animate('{{ time }}'),
|
|
||||||
], {
|
|
||||||
params: {
|
|
||||||
time: '1s',
|
|
||||||
opacity: '1'
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
// #enddocregion runtime
|
|
||||||
// #docregion reusable
|
|
||||||
trigger('openClose', [
|
trigger('openClose', [
|
||||||
transition('open => closed', [
|
transition('open => closed', [
|
||||||
useAnimation(transAnimation, {
|
useAnimation(transAnimation, {
|
||||||
@ -36,10 +19,9 @@ import { transAnimation } from './animations';
|
|||||||
})
|
})
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
// #enddocregion reusable
|
],
|
||||||
templateUrl: 'open-close.component.html',
|
templateUrl: 'open-close.component.html',
|
||||||
styleUrls: ['open-close.component.css']
|
styleUrls: ['open-close.component.css']
|
||||||
// #docregion reusable
|
|
||||||
})
|
})
|
||||||
// #enddocregion reusable
|
// #enddocregion reusable
|
||||||
export class OpenCloseReusableComponent { }
|
export class OpenCloseReusableComponent { }
|
||||||
|
Loading…
x
Reference in New Issue
Block a user