角度4动画转换
问题描述:
球员我有我的模板中的“跨度”标签,将显示是否有某些陈述是真实的......我在它上面应用了一些动画,但它没有转换就执行它..它会失去转换原因?角度4动画转换
component.ts
@Component({
selector: 'app-user-new',
templateUrl: './user-new.component.html',
styleUrls: ['./user-new.component.css'],
styles: [`span{position: absolute}`],
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)',
bottom: '100px'
})),
transition('inactive <=> active', animate('2s ease-in'))
])
]
})
state:string = "active";
我的HTML
<h3>user new component</h3>
<form
[formGroup]="heroUser"
(ngSubmit)="create(heroUser.value)"
>
<div></div>
<span [@heroState]="state" *ngIf="heroUser.controls['name'].touched && !heroUser.controls['name'].valid && heroUser.controls['name'].value != ''">incorrect data inserted</span>
<span *ngIf="heroUser.controls['name'].touched && heroUser.controls['name'].value == ''">field should not empety</span>
<span *ngIf="heroUser.controls['name'].valid">nice!</span>
<input type="text" name="name" formControlName="name">
<input type="text" name="username" formControlName="username">
<input type="text" name="email" formControlName="email">
<input type="text" name="phone" formControlName="phone">
<input type="submit" [disabled]="!heroUser.valid">
</form>
答
您应该使用状态 '无效' 和 '*' 时,与* ngIf组合这些对准的DOM元素(SPAN)不呈现或呈现。
trigger('heroState', [
state('void', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('*', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)',
bottom: '100px'
})),
transition(':enter, :leave', animate('2s ease-in'))
])