각도 2 - 모든 각도 2 API 애니메이션 예에서 선택기

Question

에 직접 애니메이션 처리기를 추가, 애니메이션 핸들러가 innerHTML을, 내가 구성 요소 선택에 직접 넣어 싶습니다

에 구현된다. 그래서 내 템플릿

@Component({ 
selector: 'vps-node', 
template: `<div [@visibility]="visibility"><ng-content></ng-content></div>`, 
animations: [ 
    trigger('visibility', [ 
     state('in', style({ transform: 'translateX(0)' })), 
     transition('void => *', [ 
      animate(300, keyframes([ 
       style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }), 
       style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }) 
      ])) 
     ]), 
     transition('* => void', [ 
      animate(300, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }), 
       style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 }) 
      ])) 
     ]) 
    ]) 
    ] 
}) 

Answer 1

생각 난이 공유하지만 난 거라고 단순히 부모 div 태그 밖으로 <ng-content>입니다 아래의 예에서

, [@visibility]="visibility"는 div 태그에 있지만 나는 selector: 'vps-node'에 원하는 호스트 요소에서 애니메이션 트리거를 만들었습니다.

페이지 전환을 처리하는 다음 코드를 확인하십시오.

@Component({ 
    selector: 'styles', 
    templateUrl: './styles.template.html', 
    host: { 
     '(@routeAnimation.start)': 'pageEnterStarted($event)', 
     '(@routeAnimation.done)': 'pageEnterCompleted($event)', 
     '[@routeAnimation]': 'true', 
    }, 
    animations: [ 
     trigger('routeAnimation', [ 
      state('*', style({ opacity: 1})), 
      transition('void => *', [ 
       style({ opacity: 0}), 
       animate(250) 
      ]), 
      transition('* => void', animate(250, style({opacity: 0}))) 
     ]) 
    ] 
}) 
export class StylesComponent { 
    pageEnterStarted() { 
    } 

    pageEnterCompleted() { 
    } 
} 

Answer 2

대괄호 안에 있어야하는 호스트 : 속성이 나타납니다.

호스트 : { '[ @visibility ]': '가시성'},

selector: 'vps-row-node', 
host: { '[@visibility]': 'visibility' }, 
template: `<ng-content></ng-content>`, 
animations: [...]