Angular 2에서 ngIf를 사용하여 CSS 전환을 작동시키는 방법은 무엇입니까?

Angular 2의 ngIf 및 CSS 전환/애니메이션

질문:

ngIf를 활용하여 Angular에서 div를 표시하는 경우 2, 요소가 처음에 숨겨져 있으면 CSS 전환이 작동하지 않는 이유는 무엇입니까?

답변:

ngIf는 조건이 false가 되면 DOM에서 요소를 제거합니다. 그러나 존재하지 않는 요소에는 전환을 적용할 수 없습니다.

해결 방법:

원활한 전환을 위해 [ngIf] 대신 [hidden]을 사용하세요.

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

이 방법으로 요소는 DOM에 남아 있으며 표시 속성이 변경될 때 전환을 적용할 수 있습니다.

Angular 애니메이션으로 업데이트된 솔루션

Angular 4.1.0 및 2.1 .0, Angular 애니메이션은 ngIf를 사용하여 전환을 달성하는 향상된 방법을 제공합니다.

Angular 4.1.0 이상:

<code class="typescript">trigger('enterAnimation', [
  transition(':enter', [
    style({transform: 'translateX(100%)', opacity: 0}),
    animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
  ]),
  transition(':leave', [
    style({transform: 'translateX(0)', opacity: 1}),
    animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
  ])
])</code>

Angular 2.1.0 :

이 접근 방식은 2.1.0에 도입된 animate() 도우미를 사용합니다. 자세한 내용은 Angular 애니메이션 문서를 참조하세요.

위 내용은 Angular 2에서 ngIf를 사용하여 CSS 전환을 작동시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!