Hinzufügen von Klasse eckig 2

Ich füge einige Animation auf Element, nur Problem neben Stil Ich muss auch Klasse hinzufügen, das ist, was ich für jetzt in meiner Komponente habe.Hinzufügen von Klasse eckig 2

@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')) 
     ] 
})

Das einzige Problem ist, dass neben diesem Attribut Stil muss ich Klasse hinzufügen geöffnet, wenn in ist, und entfernen Sie geöffnet Klasse, wenn aus ist?

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>

Quelle

2017-12-07 Miomir Dancevic

warum :) nicht die alte schmutzig jquery verwenden? ... addClass auf dem Artikel? –

In eckigen 2 verwende ich nicht jquery –

warum? .... Sie können .. und auch in meiner Erfahrung manchmal hilft es Ihnen sehr .. zum Beispiel für Diagramme und mehr, die nicht auf Angular gefüttert werden ... bu können Sie auch elementRef verwenden ... .get the Elemnt HTML und fügen hinzu die Klasse –

Wie here erklärte:

A class binding ist ein guter Weg, um eine einzelne Klasse hinzuzufügen oder zu entfernen. So

, versuchen Sie einfach:

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

Quelle

2017-12-07 11:23:55 Andriy

Hinzufügen von Klasse eckig 2

Antwort

Verwandte Themen