Angular 2에서 ngIf로 제어되는 요소에 애니메이션을 적용하는 방법은 무엇입니까?

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

이 질문은 ngIf에 의해 조작되는 요소에서 CSS 전환 또는 애니메이션을 수행하는 문제에 대해 자세히 설명합니다. Angular 2의 지시문.

문제

목표는 CSS를 사용하여 오른쪽에서 요소의 입구를 애니메이션화하는 것입니다. 그러나 처음에 ngIf를 사용하여 요소를 숨기면 전환이 실행되지 않습니다.

해결 방법

핵심 문제는 ngIf의 동작에 있습니다. ngIf와 관련된 표현식이 false가 되면 해당 요소는 DOM에서 제거됩니다. 전환 및 애니메이션에서는 해당 요소가 DOM에 있어야 하므로 렌더링되지 않은 요소에 적용하면 작동하지 않습니다.

이 문제를 해결하려면 ngIf 대신 Hidden을 사용하여 숨기는 것이 좋습니다.

업데이트된 솔루션(Angular 4.1.0 이상)

Angular 4.1.0 이상 버전에서 선호되는 접근 방식은 Angular 애니메이션을 사용하는 것입니다. 애니메이션을 사용하는 업데이트된 솔루션은 다음과 같습니다.

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    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 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

이 솔루션은 'enterAnimation'이라는 구성 요소에 트리거를 추가하고 입장 및 퇴장 상태 모두에 대한 전환을 정의합니다. 전환에는 변환 및 불투명도에 대한 스타일이 포함되어 있어 요소가 애니메이션과 함께 오른쪽에서 미끄러질 수 있습니다.

이 솔루션은 Angular 4.1.0 이상에 적용 가능하다는 점을 기억하세요. 이전 버전의 경우 숨김을 사용하는 것이 권장되는 접근 방식입니다.

위 내용은 Angular 2에서 ngIf로 제어되는 요소에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!