Angular 2의 ngIf를 사용하여 부드러운 CSS 전환을 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-27 16:12:01

원래의

968명이 탐색했습니다.

How to Achieve Smooth CSS Transitions with Angular 2's ngIf?

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>

로그인 후 복사

애니메이션 사용의 장점