DEV Community

loading...
Cover image for Animating views with Ionic 5 and ion-segment

Animating views with Ionic 5 and ion-segment

fm3ndoza profile image Fernando Mendoza ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

@import "~animate.css/animate.min.css";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

pic
Editor guide
Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

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