角度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>

來源

2017-07-15 moh

您應該使用狀態 '無效' 和 '*' 時，與* 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')) 
])

來源

2017-07-15 19:41:06

角度4動畫轉換

回答

相關問題