Animating views with Ionic 5 and ion-segment

Hey there,

This will be a short one where I just want to show you how you can animate views with Ionic 5 and the awesome ion-segment component.

Afterward, you will be able to implement a UI similar to this:

So, let's get started.

For the template, we just need an ion-segment with two or more ion-segment-button, and two separated containers. I'll be using two ion-list but feel free to use a div or any other element according to your needs.

Now we need to know when one of the ion-segment-button is clicked or touched. This is as easy as adding the ionChange event listener into the ion-segment and pass a user-defined callback. For this example, mine is called segmentChanged.

Also, we use *ngIf directive to show/hide the ion-list according to the segment value. We will change the value of this variable when our segmentChanged callback is executed, as you will notice in our component file.

<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;
  }
}

Once you implement the code above, you'll notice that the views are toggled correctly.

But what about the nice animation that we saw in the video?

The trick is to add the animate.css library into our project and add the animations through CSS classes.

I first learned this technique from Simon Grimm, a well-known expert and developer in the Ionic community.

BTW I highly recommend checking out their website to learn more about Ionic and Angular.

Animate.css is installed using a two-step process:

First, open your terminal, navigate to your Ionic project, and run the following:

npm install animate.css

Now open the src/styles.css and add the following line to import the animate.css library.

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

Note: If you don't have a styles.css file, try to add the import statement in the global.scss file.

Now, let's go back to our template and add the proper css classes:

<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>

And that's it! 😅 You can see the result below:

Comments

[J.D Nicholls]

What do you think about using Animatable as another option instead of animate.css? We've more than 500 predefined animations :) github.com/proyecto26/animatable-c...