角度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动画转换

回答

相关问题