angular2の複数のアニメーショントリガーコンポーネント

Question

1つのコンポーネントで複数のアニメーショントリガーを定義したいと思います。これは可能ですか？

たとえば、シーンを入力するためのものとホバーのためのものがあります。 このケースでは、2つのコンポーネント（親子）を定義する必要がありますか？

<div class="item" [@slideIn]="enterState"> 

    <div class="info"> 
     SOME INFO 
    </div> 
    <div class="info-on-hover" [@fadeIn]="hoverState"> 
     SOME INFO 
    </div> 
</div> 

ああ、誰かがタグ "angular2アニメーション" を作成する必要があり

よろしく

item.template.html

item.compoennt.ts

// removed the import and class part for better readability 

@Component({ 
    selector: 'item', 
    templateUrl: './item.template.html', 
    styleUrls: ['./item.style.scss'], 
    animations: [ 
    // page load animation 
    trigger('slideIn', [ 
     state('in', style({ 
      opacity: 1, 
      transform: 'translateY(0)' 
     })), 
     transition('void => *', [ 
      style({ 
       transform: 'translateY(100%)', 
       opacity: 0 
      }), 
      animate('0.5s 100ms ease-in') 
     ]) 
    ]), 


    // <--- this fails 
    // hover animation 
    trigger('fadeIn', [ 
     state('over', style({ 
      opacity: 1 
     })), 
     transition('void => *', [ 
      style({ 
       opacity: 0 
      }), 
      animate('0.5s 100ms ease-in') 
    ]) 
    ], 
}) 

Answer 1

複数のアニメーショントリガーを1つのコンポーネントで定義したいと考えています。これは可能ですか？

はい、必要な数だけトリガーを設定できます。

1つのトリガ内に複数の状態を2つではなく複数持つこともできます。たとえば、状態間に異なる遷移を持つ「入力」状態と「ホバー」状態を持つことができます。例えば

：

state('in', style({opacity: 1, 
      transform: 'translateY(0)' 
     })), 
state('hover', style({background: 'red'}), 
transition('* <=> hover', animate('200ms ease-in'))