在Android上,如果我按下RadListView内的按钮并滚动列表,则该按钮将保持:highed。当我停止按下它时,该按钮将保持:突出显示,直到再次按下它。为什么按钮保持:高亮显示?
HTML:
<GridLayout class="main" tkExampleTitle tkToggleNavButton>
<RadListView [items]="dataItems">
<ng-template tkListItemTemplate let-item="item">
<GridLayout class="post" rows="auto" columns="*">
<Button row="0" col="0" class="btn btn-flat" text="Question"></Button>
</GridLayout>
</ng-template>
</RadListView>
CSS:
.btn {
font-size: 14px;
}
@mixin btn-highlighted {
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@mixin an-btn-flat-highlight($color-from, $color-to) {
@keyframes btn-flat-highlight {
from {
background-color: $color-from;
}
to {
background-color: $color-to;
border-color: $color-to;
}
}
}
.btn-flat {
background-color: transparent;
border-width: 1;
border-color: transparent;
color: $color-secondary;
padding: 0;
&:highlighted {
@include btn-highlighted;
@include an-btn-flat-highlight(transparent, #ccc);
animation-name: btn-flat-highlight;
}
}
TS:
export class ButtonListComponent implements OnInit {
private _dataItems: ObservableArray<DataItem>;
constructor() { }
get dataItems(): ObservableArray<DataItem> {
return this._dataItems;
}
ngOnInit() {
let items: Array<DataItem> = [];
for(let i=0; i<50; ++i){
let item: DataItem = {
name: "Activity "+i
}
items.push(item);
}
this._dataItems = new ObservableArray(items);
}
}
interface DataItem {
name: String;
}
我希望按钮不会再滚动:滚动后突出显示