我用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);
}
}
}
答案 0 :(得分:1)
所以我删除了不透明度,只将背景颜色应用于转换的样式,并修复了不透明度问题。
我还将动画移动到组件并在组件内部创建了一个变量,以允许更改单个行。我按照下面的视频中的动画教程: https://www.youtube.com/watch?v=oouK4cyQnxo
希望这有助于某人!