アニメーションをHTML要素に動的に適用する

Question

私の目的は、特定のアニメーションをhtml divに適用することです。このアニメーションの名前に関する情報は、角度コンポーネントの入力変数に含まれる値に基づいています。

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

    //... 
} 

divに動的にアニメーションを挿入するには、を入力してdiv属性として挿入するとどうなりますか？

Answer 1

アニメーションの状態を使用して別のアプローチから私の問題を解決しようとしました。私のHTML要素で

、私はいつも同じアニメーションを参照してください：obj.animationが異なる（：state1、state2、...など）のアニメーションの状態が含まれていてもよい

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

。次のように

アニメーションは、例えば、定義されている：

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 })) 
    ] 
), 
    //... 
]);