Angular 2의 ngIf를 사용하여 부드러운 CSS 전환을 달성하는 방법은 무엇입니까?

Angular 2 ngIf 및 CSS 전환/애니메이션: 전환 문제 해결

ngIf를 사용하면 문제에 직면하는 것이 일반적입니다. 지시어에 의해 제어되는 요소에 대해 CSS 전환을 시도할 때. ngIf는 조건이 false가 되면 DOM에서 요소를 제거하여 전환 적용 기능을 방해합니다.

원래 문제

사용 시 ngIf CSS 전환을 사용하면 요소가 처음에 숨겨지고 전환이 작동하지 않습니다.

해결책

ngIf가 요소를 제거하므로 DOM의 경우 대체 접근 방식은 대신 숨겨진 속성을 사용하는 것입니다.

코드 샘플

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

또는 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}))
                ])
            ]
        )
    ],
    template: `
        <button (click)="show = !show">toggle show ({{show}})</button>

        <div *ngIf="show" [@enterAnimation]>xxx</div>
    `
})
export class App {
    show: boolean = false;
}</code>

애니메이션 사용의 장점

• Angular 애니메이션을 사용하면 전환 타임라인과 이징 기능을 정밀하게 제어할 수 있습니다.
• 전환 시작 및 종료를 원활하게 처리합니다.
• 유지 관리 가능성 및 가독성 전환 로직을 별도의 구성요소로 분리하여 CSS 코드를 개선했습니다.

위 내용은 Angular 2의 ngIf를 사용하여 부드러운 CSS 전환을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!