eine Animation Nehmen dynamisch ein HTML-Element

Question

Mein Ziel ist es, eine gegebene Animation zu einer HTML-div, und die Informationen über den Namen dieser Animation basiert auf dem Wert in einer Eingangsgröße in der Winkelkomponente enthalten anzuwenden:

@Component({ 
    selector: 'test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.css'], 
    animations: [ 
    myFirstAnimation(), 
    mySecondAnimation(), 
    myThirdAnimation(), 
    ] 
}) 
export class TestComponent implements OnInit { 
    /* 
    * The information about the name of the animation is containded in obj.animation 
    * For example: obj.animation may contain '@myFirstAnimation', '@mySecondAnimation' or '@myThirdAnimation' 
    */ 
    @Input() obj: any; 

    //... 
} 

wie konnte ich obj.animation als div Attribut einfügen, um dynamisch die Animation in die div einfügen?

Answer 1

Ich versuchte, mein Problem von einem anderen Ansatz zu lösen, indem ich Animationszustände verwendete.

In meinem HTML-Element, ich auf die gleiche Animation beziehen sich immer:

<div [@myAnimation]="obj.animation"> 

wo obj.animation verschiedene Zustände der Animation enthalten können (zum Beispiel: state1, state2, ...).

ist die Animation zum Beispiel wie folgt definiert:

trigger('myAnimation', [ 
    transition('void => state1', [ 
     style({ transform: 'translateX(-100%)', opacity: 0 }), 
     animate(300, style({ transform: 'translateX(0)', opacity: 1 })) 
    ] 
), 
    transition('void => state2', [ 
     style({ transform: 'translateX(100%)', opacity: 0 }), 
     animate(300, style({ transform: 'translateX(0)', opacity: 1 })) 
    ] 
), 
    //... 
]);