Question

我在元素上添加了一些动画，只有在我需要添加类的样式旁边的问题，这就是我现在在我的组件中所拥有的。

@Component({
    selector: 'app-shipment-list',
    templateUrl: './shipment-list.component.html',
    styleUrls: ['./shipment-list.component.scss'],
    animations: [
        trigger('slideInOut', [
            state('in', style({
                transform: 'translate3d(0, 0, 0)'
            })),
            state('out', style({
                transform: 'translate3d(100%, 0, 0)'
            })),
            transition('in => out', animate('400ms ease-in-out')),
            transition('out => in', animate('400ms ease-in-out'))
        ]
})

唯一的问题是，在此属性样式旁边，我需要在时添加已打开的类，并在 out 时删除已打开的类？

 filtersState: string = 'out';
    toggleFilters() {
        // 1-line if statement that toggles the value:
        this.filtersState = this.filtersState === 'out' ? 'in' : 'out';
    }

HTML

<app-shipment-list-filters [@slideInOut]="filtersState"></app-shipment-list-filters>
<button type="button" (click)="toggleFilters()" class="btn btn-info">No filter active</button>

Answer 1

如上所述here：

class binding是添加或删除单个班级的好方法。

所以，试试吧：

<app-shipment-list-filters [@slideInOut]="filtersState"
                           [class.opened]="filtersState === 'in'">
</app-shipment-list-filters>
<button type="button" 
        (click)="toggleFilters()" 
        class="btn btn-info">No filter active</button>

添加类角度2

1 个答案: