Angular 4錶行動畫使用ngFor和自定義錶行組件

我一直試圖在我用Angular 4更新它之後在表格中爲我的表中的單個行設置動畫。此刻所有行都設置爲動畫，但我只想爲行I選擇爲動畫（在我點擊編輯（E）按鈕之後）。任何想法如何我可以實現這一目標？Angular 4錶行動畫使用ngFor和自定義錶行組件

我遇到的另一個問題是0的不透明度也適用於文本，但是我希望它只適用於背景顏色？

這裏是我的plunker： https://plnkr.co/edit/vFLnzhoEfsebUZE4oOr3?p=preview

@Component({ 
    selector: '[user]', 
    template: ` 
     <td id="id">{{user.id}}</td> 
    <td id="firstName">{{user.firstName}}</td> 
    <td id="lastName">{{user.lastName}}</td> 
    <td style="width:100px" id="Action"> 
     <div class="btn-group"> 
     <button type="button" (click)="onClicked('edit', user)">E</button> 
     <button type="button" (click)="onClicked('delete', user)">X</button> 
     </div> 
    </td> 
     ` 
}) 
export class TablerowComponent implements OnInit { 

    @Input() user: any; 
    @Output() clicked = new EventEmitter(); 

    constructor() { } 

    ngOnInit() { 
    } 

    onClicked(action: string, user: any){ 
    this.clicked.emit({action: action, user: user}); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 
     <br/> 
     <table> 
      <tr> 
     <th>ID</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Action</th> 
     </tr> 
      <tr [@rowUpdated]="animation" *ngFor="let user of users" [user]=user (clicked)="onClicked($event)"></tr> 
     </table> 
     `, 
     animations: [ 
    trigger('rowUpdated', [ 
     state('hidden' , style({ opacity: 1})), 
     state('shown', style({ opacity: 1})), 
     transition('* => *', animate('2s ease', keyframes([ 
     style({ opacity: 0, offset: 0}), 
     style({ opacity: 1, backgroundColor: '#f16', offset: 0.5}), 
     style({ opacity: 0, offset: 1}), 
     ]))) 
    ]) 
    ] 
}) 
export class AppComponent { 
    users = [ 
    {id:0,firstName:'john',lastName:'doe'}, 
    {id:1,firstName:'david',lastName:'smith'} 
    ]; 
    title = 'Table Animation Test'; 
    heroine: Heroine = { 
     id: 1, 
     name: 'Hi' 
    }; 
    onClicked(value) { 
    if (value.action=='edit'){ 
     this.animation = ((this.animation === 'shown') ? 'hidden' : 'shown'); 
    } else if (value.action=='delete') { 
     console.log(value.user.id); 
    } 
    } 
}

來源

2017-08-01 David Finch

所以我刪除了不透明度和僅適用於背景色的風格進行了改造和固定的透明度問題。

我還將動畫移至組件，並在組件內創建了一個變量以允許單個行更改。我跟着下面的視頻中的動畫教程： https://www.youtube.com/watch?v=oouK4cyQnxo

希望這可以幫助別人！

來源

2017-08-02 15:58:54

有完全相同的問題。請發佈您的解決方案。 – perkrlsn

查看更新的plunker https://plnkr.co/edit/yh5HuQE1sf5MDxuAicNI?p=preview –

Angular 4錶行動畫使用ngFor和自定義錶行組件

回答

相關問題