Ionic 5 및 ion-segment로 애니메이션 보기

안녕,

이것은 Ionic 5 및 멋진ion-segment 구성 요소를 사용하여 뷰를 애니메이션하는 방법을 보여주고 싶은 짧은 것입니다.

나중에 다음과 유사한 UI를 구현할 수 있습니다.

















페르난도 멘도사










더 재미있는 프로그래밍 😋이 UI를 단 3시간 만에 코딩했습니다 😲👀힌트:


오후 17:50 - 2020년 10월 15일





15

111



자, 시작하겠습니다.

템플릿의 경우 두 개 이상의 ion-segment 와 두 개의 분리된 컨테이너가 있는 ion-segment-button 만 있으면 됩니다. 두 개ion-list를 사용하지만 필요에 따라 div 또는 다른 요소를 자유롭게 사용하십시오.

이제 ion-segment-button 중 하나를 클릭하거나 터치할 때를 알아야 합니다. 이것은 ionChange 이벤트 리스너를 ion-segment에 추가하고 사용자 정의 콜백을 전달하는 것만큼 쉽습니다. 이 예에서 내 이름은 segmentChanged 입니다.

또한 *ngIf 값에 따라 ion-list를 표시하거나 숨기기 위해 segment 지시문을 사용합니다. 구성 요소 파일에서 알 수 있듯이 segmentChanged 콜백이 실행될 때 이 변수의 값을 변경합니다.

<ion-segment (ionChange)="segmentChanged($event)" value="list1">
  <ion-segment-button value="list1">
    <ion-label>
      List 1
    </ion-label>
  </ion-segment-button>
  <ion-segment-button value="list2">
    <ion-label>
      List 2
    </ion-label>
  </ion-segment-button>
</ion-segment>

<ion-list *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>

import { Component } from "@angular/core";

@Component({
  selector: "app-my-page",
  templateUrl: "my-page.page.html",
  styleUrls: ["my-page.page.scss"]
})
export class MyPage {

  public segment: string = "list1";

  constructor() {}

  segmentChanged(ev: any) {
    this.segment = ev.detail.value;
  }
}

위의 코드를 구현하면 보기가 올바르게 전환되는 것을 알 수 있습니다.

하지만 비디오에서 본 멋진 애니메이션은 어떻습니까?

요령은 animate.css 라이브러리를 프로젝트에 추가하고 CSS 클래스를 통해 애니메이션을 추가하는 것입니다.

Ionic 커뮤니티에서 잘 알려진 전문가이자 개발자인 에게 처음 배웠습니다this technique.

BTW Ionic 및 Angular에 대해 자세히 알아보려면 웹 사이트를 확인하는 것이 좋습니다.

Animate.css는 2단계 프로세스를 사용하여 설치됩니다.

먼저 터미널을 열고 Ionic 프로젝트로 이동한 후 다음을 실행합니다.

npm install animate.css

이제 src/styles.css를 열고 다음 줄을 추가하여 animate.css 라이브러리를 가져옵니다.

@import "~animate.css/animate.min.css";

참고: styles.css 파일이 없으면 global.scss 파일에 import 문을 추가해 보십시오.

이제 템플릿으로 돌아가서 적절한 CSS 클래스를 추가해 보겠습니다.

<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>

그리고 그게 다야! 😅 아래에서 결과를 볼 수 있습니다.