Question

我用Angular 4更新它之后，我一直试图为我的表中的一行设置动画。目前所有行都有动画，但我想只为我选择的行动画（在我点击编辑后（E））按钮）。我有什么想法可以实现这个目标吗？

我遇到的另一个问题是0的不透明度也应用于文本，但是我希望它只适用于背景颜色？

这是我的傻瓜： 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

希望这有助于某人！

使用ngFor和自定义表行组件的Angular 4表行动画

1 个答案: