Angular 2의 ngIf 지시문과 함께 CSS 전환 및 애니메이션을 사용하는 방법은 무엇입니까?

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

Angular 2의 ngIf 지시문은 일반적으로 주어진 표현식을 기반으로 요소를 조건부로 렌더링하는 데 사용됩니다. 그러나 이러한 요소에 CSS 전환이나 애니메이션을 사용하면 예기치 않은 동작이 발생할 수 있습니다.

다음 코드 조각을 고려하세요.

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

이 예에서 목표는 div 요소가 다음을 수행하는 것입니다. show가 true로 설정된 경우 CSS를 사용하여 오른쪽에서 슬라이드하세요. *ngIf 지시어는 show가 true인 경우에만 요소가 렌더링되도록 보장하지만 show가 false인 경우 해당 요소는 DOM에서 완전히 제거됩니다.

CSS 애니메이션 또는 전환에서는 대상 요소가 다음을 수행해야 하기 때문에 문제가 발생합니다. 애니메이션이 진행되는 동안 DOM에 있어야 합니다. *ngIf는 show가 false일 때 요소를 제거하므로 CSS에 정의된 모든 전환이 적용되지 않습니다.

해결책:

이 문제를 해결하려면 다음을 수행하는 것이 좋습니다. 애니메이션이 적용되어야 하는 요소를 숨기기 위해 ngIf 대신 [hidden] 속성을 사용합니다.

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

[hidden]을 사용하면 해당 요소는 여전히 DOM에 존재하지만 가시성은 "hidden"으로 설정됩니다. 쇼가 거짓일 때. 이렇게 하면 CSS 애니메이션이나 전환 적용에 요소를 사용할 수 있습니다.

위 내용은 Angular 2의 ngIf 지시문과 함께 CSS 전환 및 애니메이션을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!