添加类角2

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

如前所述，这里

类绑定是添加或删除单个类的好方法。

所以，就试着：

<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>