angular2에서 여러 애니메이션 트리거 구성 요소

Question

하나의 구성 요소에 여러 개의 애니메이션 트리거를 정의하고 싶습니다. 이것이 가능한가?

예를 들어 장면을 입력하기위한 것과 맴돌기를위한 것. 이 경우 두 개의 구성 요소 (상위 하위)를 정의해야합니까?

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

는

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

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

오 item.template.html 누군가는 태그 "angular2 - 애니메이션"

감사

을 만들어야합니다

Answer 1

하나의 구성 요소에 여러 개의 애니메이션 트리거를 정의하고 싶습니다. 이것이 가능한가?

예, 필요한만큼 트리거를 가질 수 있습니다.

두 개가 아닌 하나의 트리거에 여러 개의 상태가있을 수도 있습니다. 따라서 예를 들어 '진입'상태와 '호버'상태가 서로 다른 상태로 전환 될 수 있습니다.

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