ngForとカスタムテーブル行コンポーネントを使用した角4テーブル行アニメーション

Question

角4で更新した後、テーブル内の単一の行をアニメーション化しようとしています。すべての行がアニメーションしますが、 （編集（E）ボタンを押した後に）アニメートするように選択されています。どのように私はこれを達成することができる任意のアイデア？

私が持っている他の問題は、テキストにも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); 
    } 
    } 
} 

Answer 1

だから私は、不透明度を取り除き、唯一の変換のためのスタイルに背景色を適用し、それが不透明度の問題を修正しました。

また、アニメーションをコンポーネントに移動し、コンポーネント内に変数を作成して、個々の行を変更できるようにしました。私は以下のビデオでアニメーションのチュートリアルに従った： https://www.youtube.com/watch?v=oouK4cyQnxo

これは誰かを助けることを望む！