Question

伙计我在我的模板中有“span”标签，它会显示某些陈述是否属实......我在其上应用了一些动画，但它没有过渡就执行了它...它会失去过渡为什么？

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>

Answer 1

你应该使用状态＆＃39; void＆＃39;和＆＃39; *＆＃39;当与* 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'))
])

角度4动画过渡

1 个答案: