Angular에서 * ngIf에 전환 효과를 추가하는 방법은 무엇입니까?

Question

당신이 A 또는 B에 htmlSegment를 설정하면 사용자가 component.html

<div *ngIf="htmlSegment == 'a" > 
    {{someMessage}} 
</div> 


<div *ngIf="htmlSegment == 'b" > 
    {{someMessage}} 
</div> 

에이 같은 두 개의 div가있어 말, 우리는 truthy 가치 세그먼트가 살아 온다 다른 하나는 사라질 것이라는 점을 알고있다. 거기에는 문제가 없습니다.

그러나 전환 효과로 인해 이러한 세그먼트의 모양과 사라짐이 생기게하려면 무엇이 필요합니까? 페이드 인 또는 페이 아웃 등?

DOM이 새 htmlSegment에서 완료된 후 전환이 시작되도록 할 수 있습니까? (이는 사용자가 멋진 페이드 인을 제외하고 깜박 거리거나 페이지가 갑자기 움직이지 않도록하기위한 것입니다.)

Answer 1

어때? 템플릿에서 다음

span { 
    opacity: 0; 
    transition: opacity 1s; 
} 

.active span { 
    opacity: 1; 
} 

: 애니메이션은 HTML 요소의 숨기기 또는 표시를 같은 특정 이벤트를 통지 할 때

<div [ngClass]="(htmlSegment=='a')?'active':'not-active'" > 
    <span>{{someMessage}}</span> 
</div> 

<div [ngClass]="(htmlSegment=='b')?'active':'not-active'" > 
    <span>{{someMessage}}</span> 
</div> 

Answer 2

는 애니메이션 모듈이 HTML 요소를 애니메이션하지 않지만,이 요소는 몇 가지 사전을 얻는다 애니메이션을 만드는 데 사용할 수있는 정의 된 스타일 (또는 클래스). 프로젝트에

추가 애니메이션 모듈 :

import { 
    trigger, 
    state, 
    style, 
    animate, 
    transition 
} from '@angular/animations'; 

이 구성 요소에 애니메이션 속성 추가는 :

animations: [ 
    trigger('heroState', [ 
    state('a', style({ 
    backgroundColor: 'yellow', 
    opacity:0.5 
    })), 
    state('b', style({ 
    backgroundColor: 'black', 
    opacity:1 
    })), 
    transition('a => b', animate('100ms ease-in')), 
    transition('b => a', animate('100ms ease-out')) 
    ]) 
] 

트리거는 herostate 변화 호출됩니다.

이

<div *ngIf="htmlSegment == 'a" 
[@heroState]="a"> 
    {{someMessage}} 
</div> 

<div *ngIf="htmlSegment == 'b" 
[@heroState]="b" > 
    {{someMessage}} 
</div> 

이 코드의 Angular2 온라인 샘플을 만들 수 있지만 정확히 애니메이션에서 일어날 것을 감지를위한 AngularJS와 온라인 샘플을 만들 수 (대한 :

끝에

, HTML 코드가 될 것입니다. 애니메이션 변경, 'nga-slide-down'클래스 또는 'nga-fade'클래스로 변경 가능)

Check Online(AngularJS - check auto-run js at the right panel and click on change button)