질문:
ngIf를 활용하여 Angular에서 div를 표시하는 경우 2, 요소가 처음에 숨겨져 있으면 CSS 전환이 작동하지 않는 이유는 무엇입니까?
답변:
ngIf는 조건이 false가 되면 DOM에서 요소를 제거합니다. 그러나 존재하지 않는 요소에는 전환을 적용할 수 없습니다.
해결 방법:
원활한 전환을 위해 [ngIf] 대신 [hidden]을 사용하세요.
<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>
이 방법으로 요소는 DOM에 남아 있으며 표시 속성이 변경될 때 전환을 적용할 수 있습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!