我正在尝试实现一个带有角度的简单动画。单击按钮后,我将showState
的状态从更改为shown
。由于我使用的是* ng,如果我在动画中使用了void
关键字,但它无法正常工作。
CSS
p {
border: 1px solid black;
background-color: lightblue;
padding: 10px;
}
app.component.ts
import { showStateTrigger } from './animations';
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
animations: [
showStateTrigger
]
})
export class AppComponent {
isShown = false;
}
HTML
<button (click)="isShown = !isShown">Toggle Element</button>
<p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"> You can see me now!</p>
Animations.ts
从“ @ angular / animations”导入{状态,样式,过渡,触发器,动画};
export const showStateTrigger = trigger(“ showState”,[
transition('void => shown', [
style({
opacity: 0
}),
animate(2000, style({
opacity: 1
}))
])
]);
答案 0 :(得分:2)
所以,我自己弄清楚了。我不见了:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
在appModule.ts
奇怪的是,安格尔没有抱怨它。没有错误。没有警告。
答案 1 :(得分:0)
您不应同时使用[@showState]="isShown ? 'shown' : 'notShown'"
和*ngIf="isShown
。尤其是在notWhosn不是注册状态时。
您的代码应如下所示:
@Component({
selector: 'app-root',
template: `
<button (click)="isShown = !isShown">Toggle Element</button>
<p @enterAnimation *ngIf="isShown"> You can see me now!</p>`
,
animations: [
trigger(
'enterAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('500ms', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }),
animate('500ms', style({ opacity: 0 }))
])
]
)
],
})
export class AppComponent {
isShown = false;
}